如何将 JSON 加载到 TreeStore？答案

【问题标题】：How can I load JSON into TreeStore?如何将 JSON 加载到 TreeStore？
【发布时间】：2012-11-15 16:25:20
【问题描述】：

我想将 JSON 文件加载到 TreeStore 以在 TreePanel 中使用。如果我对树进行硬编码，我可以加载带有值的商店并显示它，但是当我尝试从 JSON 文件加载它时，它不会在树中显示任何内容。这是我的代码：

JSON 文件：exampleDoc.json

{
    "success": true, 
    "Root": [{
        "name": "Bookmark 1",
        "leaf": true,
        "element": "1"
    }, {
        "name":"Bookmark 2",
        "leaf": true,
        "element": "2"
    }, {
        "name":"Bookmark 3",
        "leaf": true,
        "element": "3"
    }]
}

这是我的模型

Ext.define('bkmark', {
    model: 'Ext.data.Model',
    fields: ['name', 'element']
});

这是我的树店

var store = Ext.create('Ext.data.TreeStore', {
    model: 'bkmark',
    proxy: {
        type: 'ajax',
        url: 'exampleDoc.json',
        reader: {
            type: 'json'
        }
    }
});

这是我的树面板

var treePanel = Ext.create('Ext.tree.Panel', {
    title: 'Bookmarking',
    width: 225,
    height: 150,
    store: store,
    rootVisible: false,
    region: 'west',
    collapsible: true,
});

提前致谢！

【问题讨论】：

标签： json extjs extjs4 store treepanel

【解决方案1】：

代理的reader 有一个名为root 的配置，它定义了当您拥有像success 这样的顶级字段时实际数据的位置。

由于您的数据在"Root" 下，您应该像这样定义您的阅读器：

reader: {
    type: 'json',
    root: 'Root'
}

或者，您可以使用默认的root，即data。所以在你的 json 中将 "Root" 更改为 "data"。

顺便说一句，定义模型的标准方法是：

Ext.define('bkmark', {
    extend: 'Ext.data.Model',
    fields : ['name', 'element']
});

【讨论】：