ExtJS4：TreePanel Store 正在通过 Itemclick 一次又一次地加载 json 文件答案

【问题标题】：ExtJS4: TreePanel Store is loading the json File again and again by ItemclickExtJS4：TreePanel Store 正在通过 Itemclick 一次又一次地加载 json 文件
【发布时间】：2013-05-07 15:38:38
【问题描述】：

我有一个包含 3 个主菜单点的 json。在第一个菜单点中，有一个子菜单，因此菜单点 1 不是“叶子”。当我单击文件夹符号时，整个菜单（整个 json 文件）再次位于子菜单下。所以它的无穷大。有人可以帮我吗？谢谢！！

这是我的文件：

app/data/tree.json

{
'result':
    [
        {
            "text": "Point1",
            'children':[
                {
                    "text": "SubPoint1",
                    'leaf':true
                },
            ]
        },
        {   "text": "Point2",
            'leaf':true
        },
        {
             "text": "Point3",
             'leaf':true
        },

]

}

查看/TreeMenu.js

Ext.define('App.view.TreeMenu', {
extend: 'Ext.tree.Panel',
alias: 'widget.treemenu',
title:'Title',
store: 'TreeMenu'

});

store/TreeMenu.js

Ext.define('App.store.TreeMenu', {
extend: 'Ext.data.TreeStore',
requires: 'App.model.TreeMenu',
model: 'App.model.TreeMenu',
proxy: {
    type: 'ajax',
    url: 'app/data/tree.json',
    reader: {
        type: 'json',
        root: 'result'
    }
}

});

model/TreeMenu.js

Ext.define('App.model.TreeMenu', {
extend: 'Ext.data.Model',
fields: [
    { name: 'name', type: 'int', leaf:false, text:'name'},
    { name: 'value', type: 'string', leaf:false, text:'value'},
]

});

控制器/TreeMenu.js

Ext.define('App.controller.TreeMenu', {
extend: 'Ext.app.Controller',
views: ['TreeMenu'],
models: ['TreeMenu'],   
stores: ['TreeMenu'],
onLaunch: function() {
    var treeStore = this.getTreeMenuStore();
    treeStore.load({
        //callback: this.onStationsLoad,
        scope: this
    });
},
refs: [{
    selector: 'tree',
    ref: 'treemenu'
}],
init: function() {
    this.control({
        'treemenu': {
            itemclick : this.treeItemClick  
        }
    });

},
treeItemClick : function(view, record) {
    console.log(record);
}

});

【问题讨论】：

标签： javascript json tree extjs4 extjs-mvc

【解决方案1】：

我花了一段时间才意识到，但你的树实际上是按设计工作的 :)

我为它创建了一个小提琴来可视化：http://jsfiddle.net/dbrin/auBTH/

基本上每次在tree 中展开节点时，默认行为都是加载该节点的子节点。这意味着store 将向proxy url 属性指定的服务器发送一个GET 请求。它发送您单击以展开的节点的 ID，以便服务器端使用该 ID 来运行查询。

正如您所说，您总是返回相同的数据集，这正是您所看到的：每次展开树节点时，都会将相同的数据集作为展开节点的子节点附加到树中。您返回的节点之一是可扩展的..因此您可以再次重复该过程:)

编辑：经过进一步思考，我发现了一个单独的问题，它使节点在服务器上查找子节点，而不是在下面已经获取的子节点。问题在于如何定义读者。在您的原始代码中，您将 json reader 设置为解析从服务器返回的数据，指定 root 属性设置为 result。
虽然这适用于数据的初始加载，但它也会影响子节点的读取方式。本质上，root 配置覆盖了默认的 children 配置。我更正了我之前的示例，将 root 属性更改为 children - http://jsfiddle.net/dbrin/auBTH/4/ 现在可以按预期工作了。

【讨论】：

感谢您的回答！是的，这是正确的，但我怎样才能防止这种情况发生？我不想一次又一次地加载相同的内容！
您还有其他数据要加载吗？如果是这样，您需要为每个节点发送 id 属性，然后在服务器端处理获取该节点 id 的数据。
我只有这个 json 文件。你能给我看一个这个节点的例子然后加载它吗？！
太棒了！不得不将“结果”重命名为孩子。非常感谢！！！！！！
不客气，感谢您的回答。如果您觉得它有用，请不要忘记投票。

【解决方案2】：

Json 树的子节点是否有 "leaf : true" ？

也许是问题...

-- 编辑：

我看到你有叶子值。

可能是这样的：

'children':[

                {
                    "text": "SubPoint1",
                    'leaf':true
                }-->, <------------------------- ERASE final comma.
            ]

【讨论】：

是的，有许多额外的逗号会阻塞 IE 浏览器，应该更正这些逗号。但是，这不是意外行为的原因。在上面的答案中查看我的编辑。

【解决方案3】：

我可以确认它有帮助。诀窍是json格式

var data = {
"result": [{
    "text": "Point1",
        "children": [{

问题是节点数组首先在“结果”下，然后在“孩子”下。这些必须相同，并且在代理的根配置中使用

    var data = {
"result": [{
    "text": "Point1",
        "result": [{


root: 'result'

迈克尔

【讨论】：