Ext TabPanel学习(2)-动态添加TabPanel标签
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代码：
<body>
??? <div>
??? ??? <a id="newTab" href="javascript:void(0)">添加新标签页</a>
??? </div>
</body>
简要说明：
其实添加的话,只要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代码：
<body>
??? <div>
??? ??? <div id="addBtn"></div>
??? </div>
</body>
