如何将JSON加载到TreeStore？

Question

我想将一个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,
});

提前致谢！

Answer 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']
});