ExtJS 动态加载树treepanel

先来看看效果：

一、新建一个TreeStore，并添加根节点

Ext.define(‘Demo1.store.TreeDemoStore‘, {
    extend: ‘Ext.data.TreeStore‘,
    root: {
        text: ‘目录树‘,
        id: 0
    }
});

二、在view中添加treepanel，绑定TreeDemoStore

Ext.define(‘Demo1.view.MyViewport‘, {
    extend: ‘Ext.container.Viewport‘,
    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: ‘treepanel‘,
                    id: ‘treeDemo‘,
                    height:500,
                    store: ‘TreeDemoStore‘,
                    autoScroll: true
                }
            ]
        });

        this.callParent(arguments);
    }

});

三、在controller的onLaunch方法中加载树

Ext.define(‘Demo1.controller.MyController‘, {
    extend: ‘Ext.app.Controller‘,

    init: function (application) {
    },

    onLaunch: function () {
        //请求数据列表(数据保存在哪里就随你了，这里我先写死)id:节点id;text:节点名称;pid:父节点id
        var info = [
            {
                id: ‘1‘, text: ‘二级节点1‘, pid: ‘0‘
            },
            {
                id: ‘2‘, text: ‘二级节点2‘, pid: ‘0‘
            },
            {
                id: ‘3‘, text: ‘二级节点3‘, pid: ‘0‘
            },
            {
                id: ‘4‘, text: ‘二级节点1-三级节点1‘, pid: ‘1‘
            },
            {
                id: ‘5‘, text: ‘二级节点1-三级节点2‘, pid: ‘1‘
            },
            {
                id: ‘6‘, text: ‘二级节点2-三级节点1‘, pid: ‘2‘
            },
            {
                id: ‘7‘, text: ‘二级节点2-三级节点2‘, pid: ‘2‘
            },
            {
                id: ‘8‘, text: ‘二级节点2-三级节点1-四级节点1‘, pid: ‘6‘
            },
            {
                id: ‘9‘, text: ‘二级节点2-三级节点1-四级节点2‘, pid: ‘6‘
            }
        ];
        var store = Ext.data.StoreManager.lookup(‘TreeDemoStore‘);
        var root = store.getRoot();
        appendTreeChildNodes(root, 0, info);
    }

});

//根据父节点id加载子节点
function appendTreeChildNodes(node, pid, infos) {
    var children = [];
    var childModel = {};
    for (var i = 0; i < infos.length; i++) {
        if (infos[i].pid == pid) {
            childModel = {};
            childModel.text = infos[i].text;;
            childModel.id = infos[i].id;
            childModel.pid = infos[i].pid;
            children.push(childModel);
            infos.splice(i, 1);
            i--;
        }
    }
    node.appendChild(children);

    if (node.hasChildNodes()) {
        node.eachChild(function (child) {
            appendTreeChildNodes(child, child.get(‘id‘), infos); //递归
        });
    }
    else {
        node.set(‘leaf‘, true);
    }
}

ok了，就这么简单，下面附上源码：ExtJSDemo-TreePanel

ExtJS 动态加载树treepanel