Question

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

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

我希望第一级节点成为“firstName：来自上面的JSON。我能够实现这一点但是当任何节点被扩展时，相同的节点将作为子节点显示在下面显示的展开节点上。” p>

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

提前致谢....

Answer 1

对于您尚未“加载”的每个点击的节点，都会调用该网址。我不确定为什么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: []}
    ]
}

Ext TreePanel：如何将子节点添加到展开的节点？

1 个答案: