Ext.tree如何创建树以及动态加载树-优快云博客

本文介绍如何使用ExtJS创建静态及动态加载的树状结构，并详细展示了使用Ext.tree.TreePanel和Ext.tree.TreeLoader组件的方法。通过示例代码，读者可以了解如何初始化树面板、设置根节点以及实现动态加载数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

再动态加载数之前,我们先了解一下如何创建树.和用到的一些相关的组件和对象在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格式就行..