지난시간에 ExtJS 5.1 GPL 버전을 다운로드 받고 연동하는 법까지 해봤습니다.



    오늘은 ExtJS에서 제공하는 각종 다야한 테마들에 대해서 알아보도록 하겠습니다.


    연동작업을 했을때 "packages"라는 폴더를 이용했었습니다.


    이 "packages" 디렉토리를 들어가 보시면 하단과 같이 ext-theme-xxxx 와 같은 디렉토리들이 여러가지가 존재할 것입니다.



    ▶ 테마 폴더명


    ext-theme-aria - 블랙 계열의 테마

    ext-theme-classic- 푸른계열의 클래식 테마

    ext-theme-classic-sandbox - 현재는 지원안하는 테마인듯...

    ext-theme-crisp - ExtJS 5부터 지원시작한 깔끔한 테마

    ext-theme-crisp-touchExtJ5부터 지원시작한 깔끔한 테마 

                                      (태블릿 APP 개발시 추천)

    ext-theme-gray - 회색계열의 테마

    ext-theme-neptune - ExtJS 4부터 지원시작한 테마

    ext-theme-neptune-touch - ExtJS 5부터 지원시작한 테마

                                          (태블릿 APP 개발시 추천)


    그럼 이전에 작성해놓은 코드를 기준으로 css 디렉토리만 변경해보면서 각 테마들을 확인해 보시기 바랍니다.


    ▶ 블랙계열 테마를 위한 CSS 경로 변경

    
    <link href="../packages/ext-theme-aria/build/resources/ext-theme-aria-all.css" rel="stylesheet">
    
    


    ▶ 결과 확인





    클래식 테마를 위한 CSS 경로 변경

    
    <link href="../packages/ext-theme-classic/build/resources/ext-theme-classic-all.css" rel="stylesheet">
    
    


    ▶ 결과 확인 




    ▶ Crisp 테마를 위한 CSS 경로 변경

    
    <link href="../packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet">
    
    


    ▶ 결과 확인




    ▶ Crisp 터치테마를 위한 CSS 경로 변경

    
    <link href="../packages/ext-theme-crisp-touch/build/resources/ext-theme-crisp-touch-all.css" rel="stylesheet">
    
    


    ▶ 결과 확인




    회색계열 테마를 위한 CSS 경로 변경

    
    <link href="../packages/ext-theme-gray/build/resources/ext-theme-gray-all.css" rel="stylesheet">
    
    


    ▶ 결과 확인




    ▶ Neptune 테마를 위한 CSS 경로 변경


    <link href="../packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css" rel="stylesheet">
    
    


    ▶ 결과 확인




    ▶ Neptune 터치테마를 위한 CSS 경로 변경

    
    <link href="../packages/ext-theme-neptune-touch/build/resources/ext-theme-neptune-touch-all.css" rel="stylesheet">
    
    


    ▶ 결과 확인




    각 CSS 를 변경해준 결과, 다양한 테마들을 확인 할 수 있었습니다.

    마음에 드는 테마를 이용하셔서 강좌를 진행해주시면 되겠습니다.


    이어서, 지난 코드에 대해서 주석을 잠시 달긴 했습니다만, 그냥 설명해보도록 하겠습니다.


    
    Ext.onReady(function(){
    	Ext.Msg.alert("Chapter 1","HelloWorld");
    })
    
    


    위 코드를 보시면 


    Ext.onReady 라는 부분이 있는데, 이부분은 


    "HTML 페이지가 전체 출력이 완료 된 다음 onReady로 감싼 영역을 실행 하겠다"


    라는 의미로 알고 계시면 되겠습니다.


    주석에 작성된 것처럼, 


    JAVASCRIPT 의 window.onload와 유사하며 

    jQuery 문법으로는 $(document.ready({});/$(function(){}); 


    이 있겠습니다.


    다음으로 onReady내에 정의한 Ext.Msg.alert함수는 ExtJS에서 제공하는 메시지 alert 창이 되겠습니다.


    첫번째 입력부분은 결과물을 보시다시피, 메시지창의 타이틀 영역에 적용되는 부분입니다.

    두번째 입력부분메시지창에 출력될 내용 부분입니다.


    일반 ALERT 경고창의 경우, 줄바꿈을 할 경우 "\n"을 사용하지만, 

    ExtJS의 ALERT 경고창은 HTML로 구성이 되어있으므로 "<br/>" 이라고 적용 해주시면 되겠습니다. 

    ※ 이외의 다른 html 코드를 작성해주시면 내용부분에 적용이 가능


    이상! ExtJS 기초강좌 chapter 2 마무리 하도록 하겠습니다.




    Posted by 몽고