탭 패널 개념 Ext.tab.Panel
하나의 영역에 여러개의 패널 탭으로 나눠서 클릭시 해당 존재하는 화면 출력
tab > 하위 패널 개념
Tab 패널 만들기
Ext.create( 'Ext.tab.Panel', {
width: 480,
height: 200,
items : [
{
title: 'Tab 1',
html: 'Tab 1 Body'
},
{
title: 'Tab 2',
html: 'Tab 2 Body'
},
{
title: 'Tab 3',
html: 'Tab 3 Body'
}
],
renderTo: Ext.getBody()
});
탭의 화면
Tab 패널안에 items 넣기
Ext.create('Ext.tab.Panel', {
width: 480,
height: 200,
items : [
{
title: 'Tab 1',
items : [{
xtype: 'button',
text: 'Button'
}]
},
{
title: 'Tab 2',
items : [{
xtype: 'panel',
title: 'Panel Title'
}]
}
],
renderTo: Ext.getBody()
});
Tab에 items 만든 화면
Tab의 위치 변경하기
tabPosition: top / right / bottom / left
Ext.create('Ext.tab.Panel', {
width: 480,
height: 200,
tabPosition: 'right',
items : [
{
title: 'Tab 1',
items : [{
xtype: 'button', //Ext.button.Button 과 같은 버튼이 생성
text: 'Button'
}]
},
{
title: 'Tab 2',
items : [{
xtype: 'panel', //Ext.Panel 과 같은 패널 생성
title: 'Panel Title'
}]
}
],
renderTo: Ext.getBody()
});
Tab 위치 변경 (tabPosition: 'right')
'Web > Javascript' 카테고리의 다른 글
| [Sencha&ExtJS] ExtJS 기초.11 - 그리드패널 Ext.grid.Panel (0) | 2015.06.25 |
|---|---|
| [Sencha&ExtJS] ExtJS 기초.10 - 데이터뷰(Dataview)로 사용자 정의 템플릿 제작 (0) | 2015.06.25 |
| [Sencha&ExtJS] ExtJS 기초.9 - 콤보박스 (xtype:combo) (0) | 2015.06.24 |
| [Sencha&ExtJS] ExtJS 기초.8 - 폼 필드 (xtype: textfield / filebutton / numberfield) (0) | 2015.06.24 |
| [Sencha&ExtJS] ExtJS 기초.6 - Ext.window.Window (0) | 2015.06.24 |
| [Sencha&ExtJS] ExtJS 기초.5 - Ext.Msg.창 (0) | 2015.06.24 |
| [Sencha&ExtJS] ExtJS 기초.4 - Panel / toolbar 위치정렬 / Button (0) | 2015.06.24 |
| [Sencha&ExtJS] ExtJS 기초.3 - 이벤트 handler / listeners (0) | 2015.06.24 |
(로그인하지 않으셔도 가능)