Ext.tree如何创建树以及动态加载树

再动态加载数之前,我们先了解一下如何创建树.和用到的一些相关的组件和对象在Extjs中.创建树面板都是用的Ext.tree.TreePanel这个组件, 然后创建节点都是用的这个对象:Ext.tree.TreeNode, 看一下动态创建树的简单代码:

Ext.onReady(function() { var tree31 = new Ext.tree.TreePanel({ el: "tree3", autoScroll: true, animate: true, height: 200, enableDD: true, containerScroll: true }); //建立根 var root111 = new Ext.tree.TreeNode({ text: '根', draggable: false, id: 'root' }); //设置根 tree31.setRootNode(root111); tree31.render(); root111.appendChild(new Ext.tree.TreeNode({ id: 'a1', text: '节点1' })); var a2 = new Ext.tree.TreeNode({ id: 'a2', text: '节点2' }); root111.appendChild(a2); tree31.expandAll(); });

很简单吧...我们再看看动态载的树是怎么回事... 动态加载树主要是Ext.tree.TreeLoader这个对象话不多说了,直接就贴代码了...

var tree2 = new Ext.tree.TreePanel({ el: 'tree2', //目标div容器 autoScroll: true, animate: true, enableDD: true, height: 350, containerScroll: true, loader: new Ext.tree.TreeLoader({ dataUrl: '请求的页面', method: 'GET' }), listeners: { "click": function(node, event) { //叶子节点点击不进入链接 if (node.isLeaf()) { // 显示叶子节点菜单 event.stopEvent(); ALLEvents(node); } else { //不是叶子节点不触发事件 event.stopEvent(); //点击时展开 node.toggle(); } } } }); var root42 = new Ext.tree.AsyncTreeNode({ text: '操作中心', draggable: false, id: 'D42'//默认的node值 }); tree2.setRootNode(root42); tree2.render(); tree2.expandAll();

请求页面返回的格式如下:

[{id:'c2',text:'权限管理',icon:'Images/icons/sysmanagemenu.png',leaf:false,children:[{id:'c21',text:'人员资料管理',icon:'Images/icons/setuseridicon.png',leaf:true},{id:'c22',text:'权限设置',icon:'Images/icons/setuseridicon.png',leaf:true}]},{id:'c5',text:'系统设置',icon:'Images/icons/sysmanagemenu.png',leaf:false,children:[{id:'c51',text:'数据备份',icon:'Images/icons/setuseridicon.png',leaf:true},{id:'c52',text:'数据还原',icon:'Images/icons/setuseridicon.png',leaf:true}]}]

这样就可以了.后台看你自己用什么语言写都可以,,,只要是输出这种json格式就行..

转自（http://www.code84.com/u/Jun.Net/Blog.aspx/t-68）