ExtJs2.0学习系列（10）--Ext.TabPanel之第二式

ExtJs2.0学习系列（10）--Ext.TabPanel之第二式2010-04-21 博客园谦虚的天下种我们简单的了解了下tabpanel

下面我们要介绍的是，如何动态的添加标签页！

2.动态添加tabpanel的标签页

效果图:

点击"添加新标签页",会添加一个标签页,而且激活这个新的标签页.

html代码:

<body style="margin:10px;">
<div>
<a id="AddNewTab" href="javascript:void（0）">添加新标签页</a>
</div>
</body>

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简单页面演示",
autoLoad:{url:"tab1.htm",scripts:true}
}]
 }）;
 //下面是添加新标签页的关键代码,很简单方便
 var index=0;
 Ext.get（"AddNewTab"）.on（"click",function（）{
 tabsDemo.add（{
title:"newtab",
id:"newtab"+index,
html:"new tab",
closable:true
 }）;
 tabsDemo.setActiveTab（"newtab"+index）;
 index++;
 }）
}）;

简单说明:

其实添加的话,只要add（）方法就可以了,但是我们还要激活这个新的标签页,就必须setActiveTab（newtab的索引或id）,关键就是我们不好判断这个索引,所以只好设置个递增的全局变量index来给newtab取名，这样我们也就能准确的获取新的不重复的newtab了，也就容易激活了。而且我们可以通过下图看出来。

3.稍微修改上面的例子tabpanel（官方的例子）

效果图: