이번장부터 본격적으로 각 대표적인 컴포넌트들을 생성해보고, 생성한 컴포넌트들의 Configs 설정만으로 화면을 제작할 수 있습니다.

    오늘은 컴포넌트들을 붙이기 위하여 도화지 역할을 하는 패널에 대해 알아보도록 하겠습니다.

    이전 기본 문법 습득 및 ExtJS가 무슨역할을 하는 녀석인지 알아보기위해 자주 생성했던 컴포넌트입니다.


    1. 기본패널

    기존의 샘플용으로 제작했던 Gray 테마대신 Neptune 테마로 변경하여 코드작업을 해봤습니다.

    ▶ 샘플코드

    ▶ 실행결과



    WIDTH/HEIGHT 를 준 크기만큼으로 패널이 생성되었습니다.

    영역을 제외한 나머지 공간은 회색으로 덮어져있습니다.

    아까 적은 것처럼 하얀 도화지(= 'panel') 가 되었군요.

    2. 기본패널 + TITLE


    ▶ 샘플코드

    ▶ 실행결과



    title 속성을 준 결과, 패널상단에 제목이 붙어서 출력되었습니다.


    3. 기본패널 + HTML

    이번에는 html 속성을 이용하여 적용해주면 되겠습니다.


    ▶ 샘플코드

    ▶ 실행결과



    html 속성으로 바디영역에 value값으로 적용한 HTML 코드들이 출력되었습니다.


    4. 기본패널 + ITEMS

    패널 하단에 items 속성을 주게 되면, html 속성을 쓰는 방법과 유사하게 다른 컴포넌트(button/textfield...) 들을 패널바디 부분에 출력시킬 수 있습니다.


    ▶ 샘플코드

    실행결과



    items 코드를 보면 xtype이라고 하는 configs가 존재하는데 이 속성은

    
    <input type="button" value="버튼" />
    
    

    위 코드의 type속성과 유사하다고 이해하시면 되겠습니다.


    컴포넌트 생성시, Ext.create를 이용하여 'Ext.panel.Panel' 처럼 클래스 지정을 해주는데

    클래스의 약어를 정의한 줄임말이 xtype의 value값이 되겠습니다.


    xtype : 'button' 과 'Ext.button.Button'의 클래스와 동일한 컴포넌트입니다.



    5. 기본패널 + COLLAPSIBLE


    이어서 collapsible이라는 속성이 있는데, 이 Configs는 패널의 바디를 접고 펼치는 기능을 가진 버튼을 타이틀 우측에 생성하게 해주는 속성입니다.

    parameter 타입이 BOOLEAN 타입이라 true/false 속성으로 지정해주시면 되겠습니다.

    선언을 하지 않으시, default false이므로 패널에 출력이 되지 않으므로 true로 주면 되겠습니다.


    ▶ 샘플코드

    ▶ 실행결과



    타이틀바 우측에 버튼이 생성되어 클릭하게 되면 패널이 접히고,펼처지는 것을 확인할 수 있습니다. 처음에는 패널이 펼쳐있지만, 

    만약 처음부터 패널이 접혀있는 상태로 출력을 시키고 싶다면,

    collapsed : true 속성을 추가로 지정

    해주면 되겠습니다.


    다음시간에는 툴바를 패널에 적용하는 내용을 다뤄보도록 하겠습니다.




    신고
    Posted by 몽고