摘要：
root：tree.render（'tree'）；leaf:vartree=newExt.tree.TreePanel（｛store:tree.render（'tree'）；｝elseif（“11”.equals（node））｛json+=“[｛id:leaf:｛proxy:reader:｛type:record:｛property:direction:root：｛text:
这里分别介绍使用JSON本地数据，JSP和XML向TreeStore中加载数据的实现方式
1.本地JSON数据：
注意txt文件中叶子节点一定要加上leaf:true的属性，否则文件会无限展开的
var tree = new Ext.tree.TreePanel({ store: new Ext.data.TreeStore({ proxy: { type: 'ajax', url: '01-04-02.txt' }, root: { text: '我是根' } }) }); tree.render('tree');
01-04-02.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} ]
最后的效果如下：
2.使用JSP提供后台数据：
注意一定要为树形中的节点设置id,不能重复，后台会根据id来判断究竟是哪个节点正在展开，从而返回对应的数据，如果不设置root的ID，Ext会默认根节点的ID为root。
前台代码如下：
var tree = new Ext.tree.TreePanel({ store: new Ext.data.TreeStore({ proxy: { type: 'ajax', url: '01-05-01.jsp' }, root: { text: '我是根' } }) }); tree.render('tree');
后台JSP代码：
<%@ page contentType="text/html;charset=utf-8"%> <% request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); // 获得node参数，对应的是正在展开的节点id String node = request.getParameter("node"); System.out.println(node); String json = ""; if ("0".equals(node)) { json += "[{id:1,text:'节点阿一'},{id:2,text:'节点阿二'}]"; } else if ("1".equals(node)) { json += "[{id:11,text:'节点阿一一',leaf:false},{id:12,text:'节点阿一二',leaf:true}]"; } else if ("2".equals(node)) { json += "[{id:21,text:'节点阿二一',leaf:true},{id:22,text:'节点阿二二',leaf:true}]"; } else if ("11".equals(node)) { json += "[{id:111,text:'节点阿一一一',leaf:true},{id:112,text:'节点阿一一二',leaf:true}]"; } response.getWriter().print(json); %>
分析下后台代码：
树形异步读取的关键是node参数，当某个节点展开时，TreeStore会根据设置的url地址去后台读取数据。而当发送请求时，TreeStore会把这个节点的ID作为参数一起发送到后台去。对后台来说，只要获得node参数，就知道是哪个节点正在展开。接着会根据节点的ID返回对应的json数据。
效果如下：
3.XML数据：
var store = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: '01-06-01.xml', extraParams: { isXml: true }, reader: { type: 'xml', root: 'nodes', record: 'node' } }, sorters: [{ property: 'leaf', direction: 'ASC' },{ property: 'text', direction: 'ASC' }], root: { text: 'Ext JS', id: 'src', expanded: true } }); // create the Tree var tree = Ext.create('Ext.tree.Panel', { store: store, hideHeaders: true, rootVisible: true, viewConfig: { plugins: [{ ptype: 'treeviewdragdrop' }] }, height: 350, 400, title: 'Directory Listing', renderTo: 'tree', collapsible: true });
效果如下：
