您的位置:首页 > Web前端 > JavaScript

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