[ExtJS 3] 10. ExtJS ToolBar 툴바 만들기

이번에는 ToolBar 를 만들어 보도록 합시다.
ToolBar 는 상단 툴바와 하단툴바를 만들수 있습니다.

* Ext.Toolbar : 하위 컴포넌트를 가로로 늘어세워 보여주는 컴포넌트.
사용 너비를 벗어나면 팝업 메뉴를 제공한다.

* Ext.Button : 버튼의 생성과 상호작용을 위한 주 클래스.
마우스 클릭으로 처리함수를 호출하거나 메뉴를 표시 하는 등의 포커스 가능한 요소로 만들어 준다.

* Ext.SplitButton : 버튼의 서브클래스
이 버튼이 클릭되면 처리함수를 호출하여 드롭다운 메뉴를 보여준다.
드롭다운 메뉴가 있음을 알리기 위해 버튼의 오른쪽에 화살표를 표시해 준다

* Ext.CycleButton : SplitButton 의 서브 클래스.
설정되어 있는 버튼들이 번갈아 가며 나타난다.

* Ext.ButtonGroup : 하위 컴포넌트들의 레이아웃을 위한 패널.

<전체적으로 만들 ToolBar 의 모양>

* 이번에 만들 툴바의 버튼 종류

1. 기본적인 버튼 (Ext.Button)

2. 버튼이 클릭될 때 나타날 메뉴를 가지고 있는 버튼 (Ext.Button)

3. 화살표가 클릭됐을 때만 메뉴를 보이도록 설정된 스플릿 버튼 (Ext.SplitButton)

4. 세가지 다른 옵션이 클릭 될 때마다 차례로 바뀌는 사이클 버튼 (Ext.CycleButton)

5. 동시에 단 하나의 버튼만 "누른" 상태가 되는 한 쌍의 상호 배타적인 토글 버튼 (Ext.ButtonGroup)

자, 이제 코딩을 살펴 봅시다.
전체적인 ExtJs 의 구조는 다음과 같습니다.

1. Ext.onReady(function () {
2.      new Ext.Toolbar({
3.            renderTo : Ext.getBody(),
4.            items : [{
5.             }]//end items
6.      }); //end Toolbar
7. });

이제 다음에 나오는 코딩들은 모두  items 안에 버튼 들로 정의 되겠습니다 .^^

그 전에, 미리 이러이러한 옵션이 있다는 것 쯤은 한번 읽어 두고 넘어 갑시다 ~ 그래야 다음 코딩을 봐도 이해가 쉽겠죠?! ^^

<< Button 환경설정 옵션 >>

(itmes 안의 { xtype : '이번에다루는button의속성' } 으로 정의 될때 xtype 뒤에 줄 수 있는 옵션들...)

* icon : 아이콘으로 보여줄 이미지의 URL
* iconCls : 아이콘으로 사용할 CSS 클래스.(이 클래스에 배경이미지를 설정해 두어야함)
* text : 보여줄 텍스트
* handler : 항목이 클릭되었을 때 호출될 함수
* menu : 항목이 클릭되었을 때 서브메뉴로 보여줄 메뉴객체, 또는 메뉴의 환경설정 객체이거나 메뉴항목의 배열
* enableToggle : true 로 설정하면 단일 버튼이 만들어진다.
* toggleGroup : 한번에 하나만이 눌린 상태를 가질 수 있는 버튼의 집합

---

1. 버튼 (Ext.Button)

1. {
2.      xtype : 'button',
3.      text : '버튼'
4. }

2. 메뉴버튼 (Ext.Button)

1. {
2.      xtype:'button',
3.      text:'메뉴버튼',
4.      menu : [{
5.           text : '나쁨'
6.      },{
7.           text : '좋음'
8.      },{
9.           text : '쵝오!'
10.      }]//end menu
11. }

3. 스플릿버튼 (Ext.SplitButton)

1. {
2.      xtype : 'splitbutton',
3.      text : '스플릿 버튼',
4.      menu : [{
5.           text : '항목1'
6.      },{
7.           text : '항목2'
8.      },{
9.           text : '항목3'
10.      }]//end menu
11. }

4. CycleButton (Ext.CycleButton)

1. {
2.      xtype : 'cycle',
3.      showText : true,
4.      minWidth : 100,
5.      prependText : '우수성:',
6.      items : [{
7.           text : '고급'
8.      },{
9.           text : '중급',
10.           checked : true
11.      },{
12.           text : '저급'
13.      }]//end items
14. }

5. 토글 버튼 (Ext.ButtonGroup)

1. {
2.     text : '수평',
3.     toggleGroup : 'orientation-selector'
4. },{
5.     text : '수직',
6.     toggleGroup : 'orientation-selector'
7. }

---

* 툴바 항목 정렬, 분리선, 빈공간 부여

아래 코드는 items 안에 있는 {},{},{} 된 항목들의 사이에 들어가는 것 입니다 (옵션이 아닙니다. 주의! ^^)

1. 항목정렬

정렬할 항목과 항목 사이에 다음과 같이 items 안에 넣어주면 됩니다.
앞 / { 아래코드 } / 뒤
{아래코드}를 기준으로 앞은 왼쪽 정렬되며, 뒤로는 오른쪽으로 정렬될 것 입니다.

1. {
2.     xtype: 'tbfill'
3. }

2. 빈공간과 분리선 추가

- 빈공간

1. {
2.    xtype: 'tbspacer'
3. }

- 분리선

1. {
2.     xtype: 'tbseparator'
3. }

분리선과 정렬항목을 추가하여 최종적으로 다음과 같은 툴바가 만들어 졌습니다.

---

다음과 같이 코드를 첨부 하오니,
한번 돌려 봅시다~! ^-^
다음번엔 툴바에 버튼 이벤트 및 이벤트 처리를 해 보도록 합시다!

extjs3.war

주소는 url : 아이피:포트/extjs3/ch04_01.html 입니다.


아참, 그리고 전 머리가 그닥 좋은편이 아니랍니다.
혹시라도 오해하실까봐... 알려드리는건데..
책을 보면서 혼자 지금 공부하면서 포스팅 중인 것 이구요,
남에게 보여주기 보다는, 혼자 주절주절 거려가면서 배운 내용 익히는 중 이랍니다.
이 책 한권을 다 떼고선, mini 프로젝트를 만들어 볼 생각입니다.

책의 이름은 Learning ExtJS ExtJS 웹 애플리케이션 개발 입니다. ^^ 참고하실 분은 참고하세요~
저보다 보다 더 정확히, 자세하게 나와 있답니다.
(국내 유일의 ExtJS 책이 아닐까 합니다..)

그럼 좋은밤 보내십시요!

IT 개발자 화이팅! ^_^