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