Extjs4——向TreeStore中加载数据
这里分别介绍使用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, width: 400, title: 'Directory Listing', renderTo: 'tree', collapsible: true });
效果如下: