如何将JSON加载到TreeStore?

时间:2012-11-27 22:46:14

标签: json extjs extjs4 store treepanel

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

提前致谢!

1 个答案:

答案 0 :(得分:5)

代理reader有一个名为root的配置,用于定义当您拥有success等顶级字段时实际数据的位置。

由于您的数据位于"Root"下,因此您应该像这样定义您的阅读器:

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

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

顺便提一下,定义模型的标准方法是:

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