ExtJS5 将 JSON 从 TreeStore 加载到 TreePanel答案

【问题标题】：ExtJS5 Loading JSON from TreeStore into TreePanelExtJS5 将 JSON 从 TreeStore 加载到 TreePanel
【发布时间】：2017-02-08 07:14:48
【问题描述】：

我已经做了大量的搜索和测试，但似乎无法在我的主视图中获取 TreePanel 来显示我正在获取的 JSON 树数据。我希望有人能指出我做错或没有正确使用的事情。

这是我的代码：

树.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"
                }
            ]
        }
    ]
}
}

模型.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 设置为“详细信息”时，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的字段从“详细信息”更改为“儿童”，并且能够显示。这可能不符合我以后的要求，但我会采用我现在能得到的（与我想要的和内联商店创建不同的 JSON 格式）。

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

【问题讨论】：

标签： json extjs5 treepanel

【解决方案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
        }
    });
}

我希望这对你们中的一些人有所帮助！

【讨论】：