如何将JSON加载到TreeStore？ [英] How can I load JSON into TreeStore?

问题描述

我想将一个JSON文件加载到TreeStore中以在TreePanel中使用。我可以加载商店的值，并显示如果我硬编码树，但是当我尝试从JSON文件加载它，它不会在树中显示任何东西。这是我的代码：

JSON文件：exampleDoc.json

  {
success：true，
Root：[
 {
name：Bookmark 1，
leaf：true，
element：1
}，{
name：书签2，
leaf：true，
element 
}，{
name：Bookmark 3，
leaf：true，
element：3
} 
 ] 
} 
  

这是我的模型

'pre> 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，
}）; 
  

提前感谢

解决方案

代理的读者有一个名为 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']
});

这篇关于如何将JSON加载到TreeStore？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！