ExtJS5 正在从 TreeStore 加载 JSON 到 TreePanel

Question

我已经做了很多搜索答案和测试，但似乎无法在我的主视图中获得 TreePanel 来显示我得到的 JSON 树数据。我希望有人能指出我做错了或没有正确利用的地方。

这是我的代码：

Tree.json

{
"message": "SUCCESS",
"details": {
    "text": "Categories",
    "expanded": "true",
    "leaf": "false",
    "children": [
        {
            "text": "Child 1",
            "leaf": "true"
        },
        {
            "text": "Child 2",
            "leaf": "true"
        },
        {
            "text": "Child 3",
            "expanded": "true",
            "leaf": "false",
            "children": [
                {
                    "text": "Grandchild",
                    "leaf": "true"
                }
            ]
        }
    ]
}
}

Model.js

Ext.define('MyApp.model.Model',{
extend: 'Ext.data.TreeModel',

requires: ['Ext.data.Field'],

fields:['text']

});

Models.js

Ext.define('MyApp.store.Models',{
extend: 'Ext.data.TreeStore',
alias: 'store.models',
model: 'MyApp.model.Model',

autoLoad: true,

proxy: {
    type: 'ajax',
    url: 'data/Tree.json',
    reader: {
        type: 'json',
        rootProperty: 'details'
    }
});

View.js（片段）

xtype: 'treepanel',
        maxWidth: 300,
        minWidth: 150,
        store: {
            type: 'models',
        },
        rootVisible: false

在我看来，我看到了一棵空树。当我将 rootProperty 设置为 'details' 时，Chrome 的开发人员工具中的网络选项卡和 Firebug 显示我的 json 的无限请求，但没有加载到视图中。

任何能给我指明正确方向的东西都会非常有帮助！我想不出我做错了什么，因为语法似乎都是正确的，所以我进入了死胡同。

谢谢！

编辑：在我的视图中创建在线商店时，我能够加载 json 数据，但不能从单独的 store.js文件。我还像这样更改了商店初始化：

store: Ext.create('Ext.data.TreeStore',{
            fields:['name', 'description'],
            proxy: {
                type: 'ajax',
                url: 'data/Categories.json',
                reader: {
                    type: 'json',
                    rootProperty: 'children'
                }
            },
}

我也把我的 json 的字段从 "details" 改成了 "children"，并且可以显示了。这可能与我以后的要求不匹配，但我会采用我现在能得到的（一种不同于我想要的 JSON 格式和内联存储创建）。

如有任何进一步的帮助，我们将不胜感激！

Answer 1

我能够通过不使用 TreeStore 的自动加载来绕过这个问题。

由于我的要求需要 JSON 具有特定格式，所以我不能像以前那样将 TreeStore 与代理一起使用，因为它希望节点的所有子属性都具有相同的名称.

相反，我在我的商店中使用了 autoLoad: false，并在我的主视图中添加了一个 afterrender。此 afterrender 函数触发一个事件并为 JSON 响应执行 Ajax GET 请求。从这里开始，我处理 JSON 响应并提取树数据，然后将数据加载到我的 TreeStore 中。通过这种方式，我可以灵活地设置 JSON 的格式（以及在单个请求中发送更多信息的能力），同时仍然能够访问我的 TreeStore 所需的内容。

这是我编写的加载商店数据的函数（请注意，我已经更改了 JSON 的格式，但基础仍然在这里）：

buildTreePanel: function(panel)
{
    var tree = Ext.getCmp('leftPanel');
    console.log("Building tree panel");
    Ext.Ajax.request({
        url: 'data/reports.json',  //or server call
        method: 'GET',
        disableCaching: false,
        headers: {
            'Content-Type': 'application/json'
        },
        //params: PARAMETERS
        success: function(response, options){
            var data = Ext.JSON.decode(response.responseText);
            var treeData = data.details[0];
            console.log(treeData);
            tree.setRootNode(treeData);
        },
        failure: function(response, options){
              //do error checking
        }
    });
}

希望对大家有所帮助！

ExtJS5 正在从 TreeStore 加载 JSON 到 TreePanel

ExtJS5 Loading JSON from TreeStore into TreePanel

json

extjs5

treepanel