ExtJS 기초강좌 9 - ExtJS에서 제공하는 버튼컴포넌트 알아보기
<input type="button" value="버튼" />
ExtJS에서 제공하는 버튼컴포넌트는 위처럼 단순한 버튼말고도 여러 종류의 버튼제작이 가능합니다.
이번 강좌에서는 다음 종류의 버튼들에 대해서 다뤄보고자 합니다.
▷ 기본버튼
▷ 토글버튼
▷ 메뉴버튼
▷ 분할된 메뉴버튼
▷ 그룹버튼
▷ 크기별 버튼
우선 코드와 실행결과를 먼저 확인 후, 이어서 설명하도록 하겠습니다.
▶ 샘플코드
▶ 실행결과
간격문제로 인해서 상단과 하단 툴바를 생성하여 각각 버튼을 생성하였으며, 패널 body영역에는 사이즈별로 버튼을 추가하였습니다.
각 코드를 보면서 설명을 진행하도록 하겠습니다.
1. items에 정의된 코드 설명
items : [
// Button Small Size
{
xtype : 'button',
text : 'small',
scale : 'small'
},
// Button Midium Size
{
xtype : 'button',
text : 'midium',
scale : 'medium'
},
// Button Large Size
{
xtype : 'button',
text : 'large',
scale : 'large'
}
]
패널 바디에 존재하는 버튼들은 scale 속성을 이용하여 버튼들의 사이즈를 정의하였습니다.
scale에 적용이 가능한 value값은 다음과 같습니다.
scale : 'small' or 'medium' or 'large'
2. tbar에 정의된 코드 설명
tbar : [
// 1. DEFAULT BUTTON Component
{
xtype : 'button',
text : 'default button'
},
// 2. Toggle Button - enableToggle: true
{
xtype : 'button',
enableToggle: true,
text : 'toggle button'
},
// 3. Menu Button - configs menu - Json Array
{
xtype : 'button',
text : 'menu button',
menu : [{
text : 'menu1'
},{
text : 'menu2'
},{
text : 'menu3'
}]
},
// 4. Split Button(Menu) - configs menu - Json Array
{
xtype : 'splitbutton',
text : 'split button',
menu : [{
text : 'split1'
},{
text : 'split2'
},{
text : 'split3'
}]
}
]
상단 툴바에 정의된 코드를 보시면,
① 기본버튼
컴포넌트의 종류를 결정하는 xtype과 버튼에 들어갈 버튼 문구를 입력하는 text 속성만을 이용하였습니다.
② 토글버튼
enableToggle 속성을 true로 추가해준 토글버튼입니다.
③ 메뉴버튼
버튼컴포넌트에서 menu 속성을 JSON Array 형태로 지정해주면 하단 목록 출력이 가능합니다.
④ 나뉘어진 메뉴버튼
③의 경우, 버튼클릭시 메뉴목록이 펼쳐졌지만, 나뉘어진 메뉴버튼은 우측 화살표 영역을 클릭해주어야 메뉴목록이 출력됩니다.
xtype = 'splitbutton'으로 정의
3. fbar에 정의된 코드 설명
fbar : [
// 5. Group Button
{
xtype: 'segmentedbutton',
items: [{
xtype : 'button',
text: 'group1'
}, {
xtype : 'button',
text: 'group2'
}, {
xtype : 'button',
text: 'group3'
}]
},
// 6. Group Toggle Button - allowMultiple: true
{
xtype: 'segmentedbutton',
allowMultiple: true,
items: [{
xtype : 'button',
text: 'group toggle1'
}, {
xtype : 'button',
text: 'group toggle2'
}, {
xtype : 'button',
text: 'group toggle3'
}]
}
]
그룹버튼에 대한 코드는 하단 툴바에 적용을 하여 출력을 시키게끔 작성하였습니다.
우선적으로 xtype을 'segmentedbutton'으로 정의해주시면 기본적으로 그룹 버튼의 틀이 생성됩니다.
하단의 items속성을 이용하여 버튼들을 추가해주면 그룹형식으로 버튼들이 묶여서 출력이 가능합니다.
단순 버튼뿐만 아니라 메뉴버튼들 또한 적용이 가능합니다.
그룹버튼에서 토글기능을 구현하고자 한다면, 'allowMultiple : true' 속성은 추가해주면 그룹버튼들이 모두 토글기능을 가지게 됩니다.
지금까지 간략하게 ExtJS의 버튼타입에 대해서 알아보았습니다.
