ExtJs2.0学习系列(10)--Ext.TabPanel之第二式

上一篇种我们简单的了解了下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(官方的例子)

效果图:

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索标签
， ext
， index
， 简单
， 激活
， tabpanel
标签页效果
，以便于您获取更多的相关知识。