日期:2014-05-16  浏览次数:20263 次

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
     );
});