Ext Js 4.x Tree从Json加载数据
2016-04-01 13:43
691 查看
var treePanel = Ext.create('Ext.tree.Panel', { renderTo: Ext.getBody(), listeners: { itemclick: function(v, r) { if (r.raw.data) console.log(r.raw.data); } } }); var treeRoot = new Ext.data.NodeInterface(); function get(url) { var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); createRoot(data); } }; xhr.send(); } //创建Root function createRoot(data) { var rootArray = new Array(); for (var n = 0; n < data.size; n++) { rootArray = createNodo(data.tree ); } treeRoot.text = data.name; treeRoot.expanded = true; treeRoot.children = rootArray; treeRoot.root = true; treePanel.setRootNode(treeRoot); } //创建RootChildren function createNodo(data) { var nodoArray = new Array(); for (var n = 0; n < data.size; n++) { var treeNodo = new Ext.data.NodeInterface(); treeNodo.expanded = true; treeNodo.leaf = true; treeNodo.text = data.children .name; treeNodo.data = data.children .name; nodoArray = treeNodo; } var treeNodos = new Ext.data.NodeInterface(); treeNodos.text = data.name; treeNodos.expanded = true; treeNodos.children = nodoArray; return treeNodos; } get("json/tree.json");
tree.json
{ "size": 2, "tree": [ { "name": "A", "size": 2, "children": [ { "name": "A-Children-A" }, { "name": "A-Children-B" } ] }, { "name": "B", "size": 2, "children": [ { "name": "B-Children-A" }, { "name": "B-Children-B" } ] } ] }
相关文章推荐
- ext监听事件方法[初级篇]
- ext读取两种结构的xml的代码
- EXT富客户端后台管理系统 初步代码第1/2页
- ext实现完整的登录代码
- Ext第一周 史上最强学习笔记---GridPanel(基础篇)
- ext 列表页面关于多行查询的办法
- 用tip解决Ext列宽度不够的问题
- Ext 今日学习总结
- Ext JS框架中日期函数的用法及日期选择控件的实现
- Ext对基本类型的扩展 ext,extjs,format
- ExtJS 2.0实用简明教程 之Ext类库简介
- sencha ext js 6 快速入门(必看)
- ext jquery 简单比较
- flexigrid 类似ext grid的JS表格代码
- EXT中xtype的含义分析
- ext for eclipse插件安装方法
- 使Ext的Template可以解析二层的json数据的方法
- Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
- 利用Ext Js生成动态树实例代码
- Ext: 由于出现错误 80020101 而导致此项操作无法完成。