var tree; Ext.onReady(function(){ //创建Panel var p = new Ext.Panel({ title:'选项卡1', html:'显示左边树里面的内容' }); //创建选项卡 var centerPanel = new Ext.TabPanel({ region:'center', activeItem:0, title:'Center Panel', items:[p], width:800, height:400 }); //创建动态的根节点 var root = new Ext.tree.AsyncTreeNode({ id:'0', text:'根节点' }); //默认读取根节点的数据 var loader = new Ext.tree.TreeLoader({ dataUrl:'load.action?id=0' }); //创建TreePanel tree = new Ext.tree.TreePanel({ title:'<span style="vertical-align:top" mce_style="vertical-align:top"><img src="application_view_list.png" mce_src="application_view_list.png" style="vertical-align:top" mce_style="vertical-align:top"/> <font class="STYLE4">资源管理</font></span>', animate:true, loader:loader, root:root, width:120, enableDD:true, collapsed:true }); //动态读取节点的内容 tree.on('beforeload',beforeload); function beforeload(node){ tree.getLoader().dataUrl = 'load.action?id='+node.id; var panel1 = centerPanel.items.itemAt(0); centerPanel.remove(panel1); var p = new Ext.Panel({ title:node.text, html:'<p>'+node.text+'</p>' }); centerPanel.add(p); centerPanel.setActiveTab(p); } tree.on('click',click); function click(node,e){ var panel1 = centerPanel.items.itemAt(0); centerPanel.remove(panel1); var p = new Ext.Panel({ title:node.text, html:'<p>'+node.text+'</p>' }); centerPanel.add(p); centerPanel.setActiveTab(p); } tree.setRootNode(root); // tree.render(); // tree.expand(true,true); //创建动态的根节点 var root1 = new Ext.tree.AsyncTreeNode({ id:'0', text:'根节点' }); //默认读取根节点的数据 var loader1 = new Ext.tree.TreeLoader({ dataUrl:'load.action?id=0' }); var tree1 = new Ext.tree.TreePanel({ title:'<span style="vertical-align:top" mce_style="vertical-align:top"><img src="application_view_list.png" mce_src="application_view_list.png" style="vertical-align:top" mce_style="vertical-align:top"/> <font class="STYLE4">人力资源</font></span>', animate:true, loader:loader1, root:root1, width:120, enableDD:true, collapsed:true }); //动态读取节点的内容 tree1.on('beforeload',beforeload1); function beforeload1(node){ tree1.getLoader().dataUrl = 'load.action?id='+node.id; var panel1 = centerPanel.items.itemAt(0); centerPanel.remove(panel1); var p = new Ext.Panel({ title:node.text, html:'<p>'+node.text+'</p>' }); centerPanel.add(p); centerPanel.setActiveTab(p); } tree1.on('click',click1); function click1(node,e){ var panel1 = centerPanel.items.itemAt(0); centerPanel.remove(panel1); var p = new Ext.Panel({ title:node.text, html:'<p>'+node.text+'</p>' }); centerPanel.add(p); centerPanel.setActiveTab(p); } tree1.setRootNode(root1); var ps = new Ext.Panel({ layout:'accordion', items:[tree,tree1] }); var layout = new Ext.layout.Accordion({ titleCollapse: false, animate: true, activeOnTop: false }); var westPanel = new Ext.Panel({ layout:'accordion', title:'<font class="STYLE4"><center>业务模块</center></font>', region:'west', width:200, layoutConfig:layout, items:[tree,tree1] // collapsed:true }); var memu = new Ext.menu.Menu({ allowOtherMenus:true, items:[{ text:'添加', handler:addTreeNode },{ text:'删除', handler:deleteTreeNode },{ text:'修改', handler:updateTreeNode }] }); //动态添加节点 tree.on('contextmenu',contextmenu); function contextmenu(node,e){ e.preventDefault(); memu.showAt(e.getXY()); } //创建Viewport var border = new Ext.Viewport({ title: 'Border Layout', layout:'border', width:Ext.get('display').getWidth(), height:560, items: [westPanel,centerPanel] }); border.show(); }); //添加节点 function addTreeNode(){ var treeNode = tree.getSelectionModel().getSelectedNode(); if(treeNode == null){ Ext.MessageBox.alert('提示','请先选择一个节点'); return; } var id = treeNode.id; var fp = new Ext.form.FormPanel({ }); } function deleteTreeNode(){ Ext.MessageBox.alert('删除'); } function updateTreeNode(){ Ext.MessageBox.alert('修改'); }