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 nodevar 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 treetree.render();root.expand();tree.on('click',treeClick);//end lodingsetTimeout( function() { Ext.get('loading').remove(); Ext.get('loading-mask').fadeOut({remove:true}); }, 250 );});
页:
[1]