如何在extjs4中从json动态添加新子节点到treenode

时间:2013-06-11 09:06:39

标签: extjs4 treeview store dynamic-data updates

我在extjs4工作。我创建了treepanel视图 - MyTree view

现在点击节点周围,我正在检索其ID,将其发送到服务器端并重新检索其相应的子节点。我将此服务器端输出以json格式显示为 -

{"children":[{"text":"Subgeo1","leaf":true,"expanded":false,"checked":false},{"text":"Subgeo2","leaf":true,"expanded":false,"checked":false}]}

所以现在我想将这个json元素作为节点“around”的子节点插入。那么如何用这个新的孩子更新树存储?或者我如何动态添加子项?请帮帮我

1 个答案:

答案 0 :(得分:0)

以下是我在树上添加元素的示例:

on_AddTreeNodes: function (win) {
    var _this = this;
    //your tree
    var tree = win.down('treepanel[name=main_tree]');
    //get tree root
    var root = tree.getRootNode();
    var first = root.firstChild;
    var _index = first.childNodes.length - 1;
    //adding folder
    first.insertChild(_index, { text: 'New folder name', leaf: false });
    var data = first.getChildAt(_index);
    Ext.Ajax.request({
        url: 'your url',
        method: 'GET',
        params: {
            //some params
        },
        success: function (objServerResponse) {
                //if success, you add your data from server into your tree
                            data.insertChild(data.firstChild, {
                               text: 'your leaf name',
                               leaf: true,
                               //your other params
                            });     

    });
    //sync your tree store
    tree.getStore().sync();
}

在我的示例中,我使用 insertChild - 此方法在我的树中添加子项。 以下是一些可以帮助您的信息:work with tree in ExtJs

在我看来,我有

Ext.applyIf(me, {
            items: [
                {
                    xtype: 'treepanel',
                    name: 'main_tree',
                    title: 'Menu',
                    region: 'west',
                    collapsible: true,
                    rootVisible: false,
                    viewConfig: {
                        width: 230
                    },
                    store: Ext.create('Ext.data.TreeStore', {
                        root: {
                            expanded: true,
                            children: [
                                        {
                                            text: '',
                                            expanded: true,
                                            children: [
                                                        { text: 'Menu item', leaf: true, param1: 'somedata', param2: 'somedata', param3: 'somedata' },...

当我使用时:

data.insertChild(data.firstChild, {
                                   text: 'your leaf name',
                                   leaf: true,
                                   //your other params
                                }); 

代替'//你的其他参数'你从你的JSON得到params并写成这样:

data.insertChild(data.firstChild, {
                                       text: 'your leaf name',
                                       leaf: true,
                                       param1: 'jsondata', 
                                       param2: 'jsondata', 
                                       param3: 'jsondata'
                                    });