Ext Tree控件的使用总结-优快云博客

本文介绍了如何使用ExtJS创建树形菜单控件，包括静态树的定义、通过文件生成树形菜单及通过Ajax异步加载树形菜单的方法。文中还详细展示了不同类型的树形菜单配置示例。

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

树是一个我们日常用的组件，Ext给我们提供了一个非常好用的树控件。在ext的树形菜单控件中可以实现直接定义的树和从服务器动态加载的树，前者通常用于固定菜单，后者多用于实现动态加载的菜单。下面让我们看看用Ext创建一颗树的方法和步骤。
1,静态树:

2,通过文件生成Tree:

Ext.onReady(function(){ var tree = new Ext.tree.TreePanel({ el: 'tree', loader: new Ext.tree.TreeLoader({dataUrl: 'data.txt'}) }); var root = new Ext.tree.AsyncTreeNode({text:'root'}); tree.setRootNode(root); tree.render(); root.expand(); });

data.txt:

[ {text:'01',children:[ {text:'01-01',leaf:true}, {text:'01-02',children:[ {text:'01-02-01',leaf:true}, {text:'01-02-02',leaf:true} ]}, {text:'01-03',leaf:true} ]}, {text:'02',leaf:true} ]

3,ajax读取异步树：

Ext.onReady(function(){ var tree = new Tree.TreePanel({ el: 'tree' }); root = new Tree.AsyncTreeNode( { text : 'root', leaf:false, id : '-103', loader : new Tree.TreeLoader({ dataUrl : url //访问后台的url地址 }) }); tree.setRootNode(root); tree.render(); root.expand(); });

通过TreeLoader 调用后台获取数据：返回的数据为json格式，如下：
[{ id: 1, text: 'A leaf Node', leaf: true },{ id: 2, text: 'A folder Node', children: [{ id: 3, text: 'A child Node', leaf: true }] }]

如果每个节点前需要有checkbox组件，每个配置相中加上checked:true,例如：
[{ id: 1, text: 'A leaf Node', leaf: true, checked:true },{ id: 2, text: 'A folder Node', checked:true children: [{ id: 3, text: 'A child Node', leaf: true, checked:true }] }]