Ext TreePanel:如何向展开的节点添加子节点

Question

我试图从Ext.tree.Panel与JSON数据创建一个树。

My JSON
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

我希望第一级节点是来自上述JSON的"firstName:"。我能够做到这一点，但是当任何节点展开时，相同的节点将显示为下面所示的展开节点的子节点。

- John
---> + John
---> + Anna
---> + Peter
+ Anna
+ Peter

当任何节点展开时，我想从另一个JSON文件添加子节点。但这里的问题是，在向节点添加子节点之前，我可以看到上面附加的子节点。

有什么方法可以避免这种行为吗?

代码片段

My TreePanel:
Ext.define('MyApp.view.MyTreePanel', {
extend: 'Ext.tree.Panel',
height: 439,
width: 400,
title: 'My Tree Panel',
store: 'MyTreeStore',
displayField: 'firstName',
rootVisible: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
}
});
me.callParent(arguments);
}
});

TreeStore:
Ext.define('MyApp.store.MyTreeStore', {
extend: 'Ext.data.TreeStore',
requires: [
'MyApp.model.MyModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'MyApp.model.MyModel',
storeId: 'MyTreeStore',
proxy: {
type: 'ajax',
url: 'employees.json',
reader: {
type: 'json',
root: 'employees'
}
}
}, cfg)]);
}
});
**Model:**
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'firstName'
}
]
});

Thanks in advance....

Answer 1

url将被调用的每一个节点，你点击尚未"加载"。我不确定为什么ExtJS会这样做，因为每个节点的参数都会发生变化。因为我需要很多额外的功能，所以我所做的是覆盖树中的load()。存储(对不起，它有点乱，可以使用清理):

Ext.define('MyApp.store.MyTreeStore', {
    extend: 'Ext.data.TreeStore',
    load: function(options) {
        options = options || {};
        options.params = options.params || {};
        var me = this,
            node = options.node || me.tree.getRootNode(),
            root;
        // If there is not a node it means the user hasnt 
        // defined a rootnode yet. In this case lets just
        // create one for them.
        if (!node) {
            node = me.setRootNode({
                expanded: true
            });
        }
        if (me.clearOnLoad) {
            node.removeAll();
        }
        Ext.applyIf(options, {
            node: node
        });
        options.params[me.nodeParam] = node ? node.getId() : 'root';
        if (node) {
            node.set('loading', true);
        }
        var root = me.getRootNode();
        if (node.isRoot()) {
            // put some root option.params here. 
            // otherwise, don't pass any if you don't need to
        } else  {
            options.params = Ext.JSON.encode({
                // or some parameter here for the node to 
                // get back the correct JSON data
                nodeId: node.get('id') 
            });
        }
        return me.callParent([options]);
    },
    model: 'MyApp.model.MyModel',
    storeId: 'MyTreeStore',
    proxy: {
        type: 'ajax',
        url: 'employees.json',
        reader: {
            type: 'json',
            root: 'employees'
        }
    },
    autoLoad: false,
    listeners: {
        append: function(store,node,index) {
            // on append depth 1 is first level, beforeappend it is 0  
            if (node.get('depth') == 1) {                    
                // setting these values here assures that the node knows it's been loaded already.
                // node.set('leaf',true); force leaf true, false or whatever you want. 
                node.set('loaded',true);
                node.commit();
            }
        }
    }
});

同样，如果你需要在JSON中添加展开/折叠图标，你也可以这样做。这些是默认添加的默认字段。

{
    "employees": [
    { "firstName":"John" , "lastName":"Doe", leaf: false, children: []}, 
    { "firstName":"Anna" , "lastName":"Smith", leaf: false, children: []}, 
    { "firstName":"Peter" , "lastName":"Jones", leaf: false, children: []}
    ]
}