0

我正在尝试使用 JSON 数据从 Ext.tree.Panel 创建一棵树。

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'
}
]
});

提前致谢....

4

1 回答 1

0

将为您单击的每个尚未“加载”的节点调用该 URL。我不确定为什么 ExtJS 会这样做，因为每个节点单击的参数都会发生变化。因为我需要很多额外的功能，所以我所做的是覆盖 tree.Store 中的 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: []}
    ]
}
于 2013-06-24T23:50:26.070 回答