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

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"
                }
            ]
        }
    ]
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值