<div class="box">
<div id="myItemsPanel" class="w_320">
<h2>使用items添加标签页</h2>
</div>
<div id="myPanelAdd" class="w_320">
<h2>动态添加标签页</h2>
</div>
</div>
Ext.onReady(function(){
//Ext.tab.Panel页签
//同一时刻只有一个处于活动状态
//1. 通过items添加标签页
//超过页宽时自动出现标签页滚动按钮
Ext.create('Ext.tab.Panel',{
title : 'Ext.tab.Panel示例',
width : 300,
height : 150,
frame : true,
renderTo : 'myItemsPanel',
activeTab : 0,//默认激活第一个tab页
items : [
{title : 'tab标签页1', html : 'tab标签页1内容'},
{title : 'tab标签页2', html : 'tab标签页2内容'},
{title : 'tab标签页3', html : 'tab标签页3内容'},
{title : 'tab标签页4', html : 'tab标签页4内容'},
{title : 'tab标签页5', html : 'tab标签页5内容'}
]
});
//2. 动态添加标签页
var tabPanel = Ext.create('Ext.tab.Panel',{
title : 'Ext.tab.Panel示例(动态添加tab页)',
width : 300,
height : 150,
frame : true,
renderTo : 'myPanelAdd',
activeTab : 0, //默认激活第一个tab页
items : [{
title : 'tab标签页1',
html : 'tab标签页1内容'
}],
buttons : [{
text : '添加标签页',
handler : addTabPage
}]
});
//addTabPage回调函数
function addTabPage(){
var index = tabPanel.items.length + 1;
var tabPage = tabPanel.add({
title : 'tab标签页'+index,
closable : true,//允许关闭
html : 'tab标签页'+index+"内容"
});
tabPanel.setActiveTab(tabPage);//设置当前tab页
}
});