ExtJS 기초강좌 7 - 패널 생성과 Configs 추가로 패널 꾸며보기
이번장부터 본격적으로 각 대표적인 컴포넌트들을 생성해보고, 생성한 컴포넌트들의 Configs 설정만으로 화면을 제작할 수 있습니다.
오늘은 컴포넌트들을 붙이기 위하여 도화지 역할을 하는 패널에 대해 알아보도록 하겠습니다.
이전 기본 문법 습득 및 ExtJS가 무슨역할을 하는 녀석인지 알아보기위해 자주 생성했던 컴포넌트입니다.
1. 기본패널
기존의 샘플용으로 제작했던 Gray 테마대신 Neptune 테마로 변경하여 코드작업을 해봤습니다.
▶ 샘플코드
▶ 실행결과
WIDTH/HEIGHT 를 준 크기만큼으로 패널이 생성되었습니다.
영역을 제외한 나머지 공간은 회색으로 덮어져있습니다.
아까 적은 것처럼 하얀 도화지(= 'panel') 가 되었군요.
2. 기본패널 + TITLE
▶ 샘플코드
▶ 실행결과
title 속성을 준 결과, 패널상단에 제목이 붙어서 출력되었습니다.
3. 기본패널 + HTML
이번에는 html 속성을 이용하여 적용해주면 되겠습니다.
▶ 샘플코드
▶ 실행결과
html 속성으로 바디영역에 value값으로 적용한 HTML 코드들이 출력되었습니다.
4. 기본패널 + ITEMS
▶ 샘플코드
▶ 실행결과
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 속성을 추가로 지정
해주면 되겠습니다.
다음시간에는 툴바를 패널에 적용하는 내용을 다뤄보도록 하겠습니다.
