[Sencha&ExtJS] ExtJS 기초.7 - Ext.tab.Panel
탭 패널 개념 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')
