1)、动态添加TabPanel标签
效果图
[img]http://dl2.iteye.com/upload/attachment/0087/3623/63f28aa2-fa06-3b5a-8dff-1163f1830325.png[/img]
js代码：
Ext.onReady(function(){
Ext.QuickTips.init();
var tabsDemo = new Ext.TabPanel({
renderTo:Ext.getBody(),
activeTab:0,
height:700,
frame:true,
items:[{
title:'autoLoad为html简单页面演示',
html:'原来就有的标签页面',
autoLoad:{url:'tab1.htm',scripts:true}
}]
});
var index = 0;
Ext.get("newTab").on("click",function(){
tabsDemo.add({
title:'new tab',
id:'newtab'+index,
html:"newtab标签页面",
closable:true
});
tabsDemo.setActiveTab("newtab"+index);//设置新添加的标签为激活标签
index++;
});
})
html代码：
简要说明：
其实添加的话,只要add()方法就可以了,但是我们还要激活这个新的标签页,就必须setActiveTab(newtab的索引或id),
关键就是我们不好判断这个索引,所以只好设置个递增的全局变量index来给newtab取名，
这样我们也就能准确的获取新的不重复的newtab了，也就容易激活了
2)、对上面的例子进行稍微修改
效果图：
[img]http://dl2.iteye.com/upload/attachment/0087/3640/2691b582-5f5d-3cb5-8845-881136206466.png[/img]
js代码：
Ext.onReady(function(){
Ext.QuickTips.init();
var tabsDemo = new Ext.TabPanel({
renderTo:Ext.getBody(),
// resizeTabs:true,//宽度能自动变化，但是会影响标题的显示
activeTab:0,
height:200,
enableTabScroll:true,//挤的时候能够滚动收缩
width:200,
frame:true,
items:[{
title:'页面演示',
html:'原来就有的标签页面',
}]
});
var index = 0;
function addTabs(){
tabsDemo.add({
title:'new tab',
id:'newtab'+index,
html:"newtab标签页面"+index,
closable:true
});
tabsDemo.setActiveTab("newtab"+index);//设置新添加的标签为激活标签
index++;
};
//设置一个按钮(上面的是一个链接)
new Ext.Button({
text:'添加新标签页',
handler:addTabs
}).render(document.body,"addBtn");
})
html代码：
