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[n] = createNodo(data.tree[n]);
}
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[n].name;
treeNodo.data = data.children[n].name;
nodoArray[n] = 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"
}
]
}
]
}