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（Snippet）

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

在我看来，我看到一棵空树。当我将rootProperty设置为＆＃39;详细信息＆＃39;时，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＆＃39;＆＃34;详细信息＆＃34;儿童＆＃34;，它能够显示。这可能不会在以后符合我的要求，但我会采取我现在可以得到的东西（与我喜欢的内容和内联商店创建不同的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

1 个答案: