EXTjs点击菜单项显示相应的内容的实现方法

前一阵子看网上下下来的实例,
就没弄明白怎么实现的点击菜单项,在右侧显示具体的和那个菜单项相关的内容的方法.
今天仔细的看了下谦虚的天下ExtJs2.0学习系列(10)–Ext.TabPanel之第二式教程弄明白了.
下面贴出一些代码:

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

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了,也就容易激活了。

实现的方法就在于add()方法和setActiveTab().

相关文章

发表评论

返回顶部