Ext里面tree的例子

最新推荐文章于 2015-03-27 10:53:32 发布

原创最新推荐文章于 2015-03-27 10:53:32 发布 · 5.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#tree #ext #function #application #layout #border

Ext 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用 ExtJS 构建一个具备动态加载功能的树形菜单，并将其与选项卡面板相结合，实现点击不同菜单项时更新选项卡内容的功能。该应用通过 TreePanel 和 TabPanel 的组合，展示了一个典型的业务模块导航界面。

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:'<img src="application_view_list.png" mce_src="application_view_list.png" style="vertical-align:top" mce_style="vertical-align:top"/> 资源管理', 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:''+node.text+'' }); 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:''+node.text+'' }); 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:'<img src="application_view_list.png" mce_src="application_view_list.png" style="vertical-align:top" mce_style="vertical-align:top"/> 人力资源', 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:''+node.text+'' }); 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:''+node.text+'' }); 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:'<center>业务模块</center>', 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('修改'); }