如何将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']
});