이번 시간에는 ExtJS 관련 문법에 대해서 간단히 이해를 돕도록 해보겠습니다.


    ExtJS 기본구조

    ExtJS의 기본문법의 틀은 JSON 규격을 따르고 있습니다.


    단일 속성일 경우, "{ }" 

    다중 속성일 경우, "[ {},{} ]"


    JSON 규격에 대해서 익숙하신 분들이시라면, ExtJS에 크게 거부감을 느끼지 않으실겁니다.


    ExtJS onload 함수

    지금까지 작성해온 샘플 코드들을 보시면, 

    Ext.onReady(function(){
        // code here
    });
    
    

    위와 같은 코드를 이용하였습니다.

    ExtJS MVC에서는 별도로 위와같이 "Ext.onReady"를 사용하지 않아도 되지만, 무슨 기능을 하는 문법인지 이해를 하고 넘어가도록 하겠습니다.


    ExtJS 기초강좌 1 에서도 설명드렸다시피, ONLOAD함수내에 작성된 스크립트 명령어는 모든 HTML태그가 출력이 된 후, 기능을 수행합니다.


    Ext.create('xxx',{}) 문법이해

    ExtJS에서 제공하는 일부 컴포넌트(ALERT,CONFIRM,TOAST...) 들을 제외한 나머지 컴포넌트들은 "Ext.create" 라는 문법을 이용하여 컴포넌트 생성을 해주도록 되어있습니다.

    ExtJS MVC 에서는 미리 define이라는 문법을 이용하여 컴포넌트들을 정의한 후, 조금 더 간단하게 혹은 자동으로 컴포넌트를 생성할 수 있습니다.

    하지만 그전에 우리는 Ext.create 문법을 이용하여 컴포넌트 생성을 하도록 하겠습니다.

    'xxx' ← 해당 부분은 클래스명을 입력해주시면 되겠습니다.

    클래스명은 ExtJS API Documentation을 참고하셔서 확인해주세요


    패키지개념의 프로그램을 다루어 보셨던 분들이시라면,  클래스 구조에 대해서 이해하기 쉬우실거라 생각됩니다.

    API 사이트에서 패널 컴포넌트를 예를 들자면,


    Ext 패키지 밑에 panel 밑에 'Panel' 이라는 클래스가 존재합니다.

    그래서 만약 패널 컴포넌트를 생성해주시고자 하신다면,

    
    Ext.create('Ext.panel.Panel',{
       // config here
    });
    
    

    위와같이 선언을 해주시면 되겠습니다.


    Config 이해하기

    컴포넌트마다 지원하는 Config(속성)이 다양합니다.

    속성값이라 하면,

    
    Ext.create('Ext.panel.Panel',{
       // config here
    });
    
    

    config here이라는 부분에 위치하게 되는 key : value 형식의 속성값입니다.


    이번 역시, 패널 컴포넌트를 이용하여 설명을 드리겠습니다.


    API 문서를 보고 Panel 클래스를 선택하게 되면 우측에 상단부분에 Configs라는 메뉴가 존재합니다. 해당 부분에 마우스 포인터를 위치 시키게 되면 다음처럼 리스트가 표출 됩니다.



    위에 속성값들이 key 값이 되겠습니다. 

    해당 부분에 대한 value값에 대한 데이터 형식과 같은 처리는 사용하고자 하는 속성을 클릭하게 되면 자세하게 입력값 및 설명에 대해서 이동 시켜줍니다.


    "width" config를 클릭한 경우,



    위 처럼 width 속성의 value에 입력할 수 있는 타입은 Number 타입과 String 타입이 되겠군요.

    하단에는 해당 속성에 대한 설명이 영문으로 자세히 나와있습니다.


    Method / Event 등 역시 이와같이 선택하셔서 적용해보세요.

    앞으로 메소드 및 이벤트에대해서는 이것이 어떤 기능을 한다라고 자세히 설명하지는 않도록 하겠습니다. 

    Config 찾는것처럼 API 문서를 이용해주세요.


    원하는 위치에 표출시키기

    Ext.create를 이용하게 되면, 컴포넌트가 생성되었을 뿐, 화면에는 출력이 되지 않습니다.

    이럴경우 renderTo라는 config를 이용하여 원하는 태그 위치내에 출력하게 하도록 하면 되겠습니다.


    renderTo의 value로 Ext.getBody() 를 주었습니다.

    Ext.getBoddy()는 body태그에 해당 컴포넌트를 통째로 적용하겠다라는 의미로 해석 할 수 있습니다.

    만약, HTML 화면의 일부를 ExtJS 컴포넌트를 출력하고 싶다라고 할경우에도 사용이 가능합니다.


    예를들어 코드를 작성해보았습니다.

    ▶ 실행결과


    위와 같이 3개의 DIV 태그 중 두번째 DIV 태그에 패널이 삽입 되는것을 확인 할 수 있습니다.

    즉, 모든 화면을 ExtJS로 구성을 하느냐, 별도로 퍼블리싱을 일부페이지만을 ExtJS 컴포넌트를 이용하느냐 선택사항입니다.


    지금까지 간략하게나마 ExtJS 기초분법에 대하여 설명을 하였습니다.

    될수 있는 한, 이해하기 쉽게 풀어서 설명을 드렸는데, 괜찮으셨나요? 


    다음장에는 ExtJS 컴포넌트 몇가지 예를들어 이벤트 적용하는 방법에 대하여 알아보도록 하겠습니다.




    Posted by 몽고