tab和tree的双剑合璧:
//首先定义一个tab
var tabs = new Ext.TabPanel( {
resizeTabs : true,
minTabWidth : 115,
tabWidth : 135,
enableTabScroll : true,
width : '100%',
height : 800,
defaults : {
autoScroll : true
},
});
//然后定义一个tree
var tree = new Ext.tree.TreePanel({
border:false,
autoWidth: true,
useArrows:true,
autoScroll:true,
animate:true,
rootVisible: false,
leaf:true,
loader: new Ext.tree.TreeLoader({dataUrl: 'tree.json'}),
root: {
nodeType: 'async',
listeners:{
expand:function(){
tree.getRootNode().item(0).fireEvent("click",tree.getRootNode().item(0));
}
}
},
listeners:{
'click':function(n){
var url = 'managedict1.jsp';
var tabPanel = tabs.getItem(n.text);//根据id获得指定的tab
if(tabPanel!=null){//如果根据指定的id获得tab不是空值,就将这一个tab设置为活动的tab
tabs.setActiveTab(n.text);
tabPanel.load();
}else{
tabs.add( {//如果是空值,就重新建一个tab,其中tab指向活动的html。
id:n.text,
title : n.text,
iconCls : 'tabs',
html : '<iframe id="topo" src="'+url+'" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>',
closable : true
}).show();
}
}
}
});
转载于:https://blog.51cto.com/1193452522/998633