在实际应用中对tab页的动态添加和删除也是非常重要的操作
创建一个支持动态添加和删除tab页的简单应用，在示例中通过调用Ext.TabPanel的add（）方法实现动态添加效果
通过设置tab页的配置项closable，为true在tab标签上显示一个关闭按钮来实现删除效果，示例代码如下
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var tabPanel = new Ext.TabPanel({
height : 150,
width : 300,
activeTab : 0, //默认激活第一个tab页
animScroll : true, //使用动画滚动效果
enableTabScroll : true, //tab标签超宽时自动出现滚动按钮
applyTo : 'panel',
items : [
{title: 'tab标签页1',html : 'tab标签页1内容'}
],
buttons : [
{
text : '添加标签页',
handler : addTabPage
}
]
});
function addTabPage(){
var index = tabPanel.items.length + 1;
var tabPage = tabPanel.add({ //动态添加tab页
title: 'tab标签页'+index,
html : 'tab标签页'+index+'内容',
closable : true //允许关闭
})
tabPanel.setActiveTab(tabPage); //设置当前tab页
}
});
</script>
运行效果如图
