Ext Js 4.x Tree从Json加载数据

来源：互联网发布：喜马拉雅fm客户端mac 编辑：程序博客网时间：2024/06/07 08:16

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"                }            ]        }    ]}

0 0