在应用程序中,我们经常需要显示或处理树状结构的对象信息,比如部门信息和地区信息,树是一种非常典型的数据结构,这些信息都可以用树来表示。对于传统的HTML页面来说,完全依靠手动编码来实现树是比较困难的,因为需要写很多的JS代码,对基于AJAX异步加载来说尤其如此,不但涉及AJAX数据异步加载,还需要考虑跨浏览器支持,处理起来非常麻烦,EXT中提供了现成的树控件,通过这些控件,可以在B/S应用中快速开发出包含树形信息结构的应用。
本文就是详细介绍树形结构的使用过程和实例。
一、创建一棵树
树控件由Ext.tree。TreePanel类定义,控件的名称为TreePanel, TreePanel类继承自小组面板,在EXT中使用树控件非常简单,我们先来看一下代码(包含配置信息)。
<强>[升c] 强,观点plaincopy& lt; html xmlns=比;李,
<李>& lt;头id=runat=比;李,
<李类=癮lt”>,,& lt; title>简单的树形& lt;/title>李,
<李>,,& lt;链接类型rel==href=https://www.yisu.com/>
<李类=癮lt”>,,& lt;脚本类型=src=https://www.yisu.com/zixun/
<李>,,& lt;脚本类型=src=https://www.yisu.com/zixun/>
<李类=癮lt”>,,& lt;脚本类型=祝辞& lt; !李,,
<李>,,,,Ext.onReady(函数(){
<李类=癮lt”>,,,,,var=Ext.tree树。TreePanel ({,
<李>,,,,,,,,el:
<李类=癮lt”>,,,,,,});李,
<李>,,,,,根,var=Ext.tree.TreeNode({文本:});李,
<李类=癮lt”>,,,,,,tree.setRootNode(根);李,
<李>,,,,,,tree.render ();,,,,,,李,
<李类=癮lt”>,,,,});,,李,
<李>& lt;/script>李,
<李类=癮lt”>& lt;/head>李,
<李>& lt; body>李,
<李类=癮lt”>& lt; div id=祝辞& lt;/div>李,
<李>& lt;/body>李,
<李类=癮lt”>& lt;/html>李,
这里的参数树表示渲染的DOM的id.HTML中应该要要有& lt; div id=皌ree"祝辞& lt;/div>相对应,最后这棵树就出现在这个div的位置上。
在获得了树形面板后,就必须要设置根,因为必须有了根才可以生长枝节,最后生成完整的树,所以根是必须的。具体实现的效果如图1所示。
<强> 
<强>图1只有根的树
二,为树生枝展叶
上面的实例代码生成一棵没有根的树,下面的代码就为树添加枝和叶,代码清单如下:
<强>[升c] 强,观点plaincopy& lt;脚本类型=比;李,
<李>,,,,Ext.onReady(函数(){
<李类=癮lt”>,,,,,var=Ext.tree树。TreePanel ({,
<李>,,,,,,,,el:
<李类=癮lt”>,,,,,,,,autoHeight:
<李>,,,,,,});李,
<李类=癮lt”>,,,,,根,var=Ext.tree.TreeNode({文本:});,,,,,,李,
<李>,,,,,,var node1=Ext.tree.TreeNode({文本:});李,
<李类=癮lt”>,,,,,,var node3=Ext.tree.TreeNode({文本:});李,
<李>,,,,,,var node2=Ext.tree.TreeNode({文本:});,李,
<李>,,,,,,node3.appendChild (node2);李,
<李类=癮lt”>,,,,,,root.appendChild (node1);李,
<李>,,,,,,root.appendChild (node3);,
<李类=癮lt”>,,,,,,tree.setRootNode(根);,李,
<李类=癮lt”>,,,,,,tree.render ();,,,,,,李,
<李>,,,,});李,
<李类=癮lt”>& lt;/script>李,
效果图如图2所示:
<强> 
<强>图2完整的树控件
三、使用TreeLoader获得数据
使用上面的录入方式来获取数据不仅麻烦,而且还容易出错,Ext.tree。TreeLoader可以利用从后台获取的数据为我们组装出一棵树来,我们只需要提供数据,让TreeLoader完成数据转换和装配节点的操作。
(1)我们要为TreePanel配置一个TreeLoader,如下面代码所示:
<强>[升c] 强,观点plaincopyvar=Ext.tree树。TreePanel ({,
<李>,,,,,,,,el:
<李类=癮lt”>,,,,,,,,加载程序:Ext.tree.TreeLoader ({dataUrl:}),,,,,,,,李,
<李>,,,,,,,,autoHeight:
<李类=癮lt”>,null
