且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何将JSON加载到TreeStore?

更新时间:2022-10-17 23:19:37

代理的读者有一个名为 root 的配置,它定义了实际数据的位置当您有***的字段,如成功



由于您的数据位于,你应该这样定义你的读者:

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

或者,你可以使用默认的,这是数据。所以在你的json更改数据



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

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


I would like to load a JSON file into a TreeStore to use in a TreePanel. I can load the store with values and have it display if I hard-code the tree, but when I try to load it from a JSON file it does not display anything in the tree. Here is my code:

JSON file: 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"
         }
    ]
}

Here is my model

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

Here is my Tree Store

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

Here is my Tree Panel

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

Thanks in advance!

A proxy's reader has a config called root, which defines where the actual data is when you have top level fields like success.

Since your data is under "Root", you should define your reader like so:

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

Alternatively, you can use the default root, which is data. So in your json change "Root" to "data".

By the way, the standard way to define a model is:

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