ExtJs 实现 tree + tab

//设置树的点击事件
function treeClick(node,e) {
if(node.isLeaf()){
e.stopEvent();
var n = tab.getComponent(node.id);
if (!n) {
var idSrcString = node.id;
var idSrcArr = idSrcString.split("|");
var n = tab.add({
'id' : idSrcArr['0'],
'title' : node.text,
closable:true,
html : "<iframe height='100%' width='100%' src='./php/"+idSrcArr['1']+".php'></iframe>"
});
}
tab.setActiveTab(n);
}
}

//生成标签页
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true
});

Ext.onReady(function(){
//layout
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:80
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),{
region:'west',
id:'west-panel',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'系统菜单',
collapsible :true,
layoutConfig:{
animate:true
},
items: [
{
title:'后台',
border:false,
html:'<div id="tree-div" style="overflow:auto;width:100%;height:100%"></div>'
//iconCls:'nav'
}]
},
tab//初始标签页
]
});

//设置树形面板
var Tree = Ext.tree;
// set the root node
var root = new Tree.AsyncTreeNode({
text: '后台',
draggable:false,
id:'root'
});

var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
root:root,
animate:true,
enableDD:false,
border:false,
rootVisible:false,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'treedata.php'
})
});

tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
tree.on('click',treeClick);

//end loding
setTimeout(
function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250
);
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值