上一篇种我们简单的了解了下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
标签页效果
，以便于您获取更多的相关知识。
时间： 2024-10-23 03:10:12