三、使用TreeLoader获得数据

使用上面的录入方式来获取数据不仅麻烦，而且还容易出错，Ext.tree.TreeLoader可以利用从后台获取的数据为我们组装出一棵树来，我们只需要提供数据，让treeLoader

完成数据转换和装配节点的操作。

（1）我们要为TreePanel配置一个TreeLoader，如下面代码所示：

var tree=new Ext.tree.TreePanel({ el:'tree',

loader:new Ext.tree.TreeLoader({dataUrl:'data.txt'}), autoHeight:true });

（2）这里的TreeLoader仅包含一个参数{dataUrl:'data.txt'},这个dataUrl表示在树完成渲染后从何处读取数据。data.txt内容如下： [

{text:'not leaf'},

{text:'is leaf',leaf:true} ]

Data.txt返回的是json数据。

(3) 现在查看页面依然只能看到根，没有读取数据并显示到页面上，因为我们使用的TreeNode不支持Ajax，我们需要将其改成AsyncTreeNode,这样才可以实现我们想要的异步加载效果，如下面的代码所示：

var root=new Ext.tree.AsyncTreeNode({text:'区域信息'});

注意:必须将root.expand(true,true)修改成root.expand()避免无限循环展开树枝。

四、读取本地JSON数据

读取本地JSON其实是一种是用使用TreeLoader的另类方法。因为有时候树形的数据并不多，为了获取少量的数据而是用AJAX访问后台实在不划算。首先为TreePanel设置一个参数为空的TreeLoader，如下面代码所示：

var tree=new Ext.tree.TreePanel({ el:'tree',

loader:new Ext.tree.TreeLoader(), autoHeight:true });

然后，设置一个根节点，并为这个根节点设置children属性，如下面代码所示： var root=new Ext.tree.AsyncTreeNode({ text:'我是根',

children:[

{text:'Leaf No.1',leaf:true}, {text:'Leaf No.1',leaf:true} ] });

tree.setRootNode(root); 这里需要注意几点：

(1) 必须设置TreeLoader,否则根节点会一直处于在读取状态，无法获得children中定义的子节点

(2) 根节点必须是AsyncTreeNode,如果是TreeNode,也无法生成子节点 (3) 子节点中的叶子节点必须都加上leaf:true，否则会一直显示读取状态。 五、右键菜单

树形弹出的右键菜单效果图如图3所示：

图3 右键菜单效果 具体实现步骤如下：

(1) 制作自定义菜单，如下面的代码所示： var contextmenu=new Ext.menu.Menu({ id:'theContextMenu', items:[{

text:'点击',

handler:function(){ alert('我被点中了'); } }] });

(2) 绑定contextmenu事件，如下面代码所示： tree.on(\ e.preventDefault(); node.select();

contextmenu.showAt(e.getXY()); }); 六、修改节点的默认图标

实际上，每个树形节点都有icon和iconCls属性，他们负责制定节点的图标，现在我们来修改树种节点的图标，无论是通过new手工创建的节点，还是通过JSON读取到的节点，设置方式都是一样，如下面代码所示： var root1=new Ext.tree.TreeNode({ text:'icon',

icon:'user_female.png' });

七、从节点弹出对话框

下面的代码可以让对话框看起来像是从标题上飞出来的！效果：单击节点弹出对话框 tree.on(\ Ext.Msg.show({ title:'提示',

msg:\你单击了\ animEl:node.ui.textNode }); });

八、节点提示信息

当我们把鼠标停留在某个节点的上方时，便会出现提示信息，为了实现这种效果，我们需要对提供的JSON数据做一些修改，在JSON中添加对应的节点提示信息，我们给每个节点数据都加上qtip:'xxx'参数，这个节点就可以显示提示信息了。

不过，仅仅为JSON添加这个参数还不能在页面上显示提示信息，需要先在JS中对EXT的提示功能进行初始化。

Ext.QuickTips.init();//开启提示功能

上面这行代码必须在其他功能加载前完成，建议写在onReady函数的第一行。具体代码如下：