Ext Tree控件的使用总结
树是一个我们日常用的组件，Ext给我们提供了一个非常好用的树控件。在ext的树形菜单控件中可以实现直接定义的树和从服务器动态加载的树，前者通常用于固定菜单，后者多用于实现动态加载的菜单。下面让我们看看用Ext创建一颗树的方法和步骤。
1,静态树:
<html> <script type="text/javascript"><!-- Ext.onReady(function(){ var tree = new Ext.tree.TreePanel({ el:'tree' }); //根节点 var root = new Ext.tree.TreeNode({text:'root'}); //子节点 var node1 = new Ext.tree.TreeNode({text:'子节点1'}); var node2 = new Ext.tree.TreeNode({text:'子节点2'}); var node3 = new Ext.tree.TreeNode({text:'子节点3'}); //叶子节点 var node11 = new Ext.tree.TreeNode({text:'张三'}); var node21 = new Ext.tree.TreeNode({text:'李四'}); var node31 = new Ext.tree.TreeNode({text:'王五'}); node1.appendChild(node11); node2.appendChild(node21); node3.appendChild(node31); root.appendChild(node1); root.appendChild(node2); root.appendChild(node3); tree.setRootNode(root); tree.render(); root.expand(); }); // --></script> <body> <div id="tree" style="height:800px;"></div> </body> </html>
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 }] }]