来自JSON的嵌套数据的Treepanel [英] Treepanel with nested data from JSON

问题描述

我想将JSON中的嵌套数据添加到treepanel中。我的问题是，树被列出了JSON记录的数量（分数的数目，在这个例子中为1），没有任何文本。但是当我选择一个孩子时，它显示未捕获TypeError：无法读取未定义的错误的属性'internalId'。这是我迄今为止所尝试的。

JSON文件（schemesInfo.json）。

  {
divisions：[
 {name：division1，id：div1，subdivisions：[
 {name ：Sub1Div1，id：div1sub1，schemes：[
 {name：Scheme1，id：scheme1}，
 {name Scheme2，id：scheme2}]}，
 {name：Sub2Div1，id：div1sub2，schemes：[
 {name Scheme3，id：scheme3}}} 
 
]}] 
} 
  

模型：（schemesmodel.js）

  Ext.define（'GridApp.model.schemesmodel' ，{
 extends：'Ext.data.Model'，
 fields：['name'，'id']，
 proxy：{
 type：'ajax'，
 api：{
 read：'data / schemesInfo.json'
}，
 reader：{
 type：'json'，
 root：'divisions '
} 
} 
}）; 
  

商店：（schemesstore.js）

< p $ p> Ext.define（'GridApp.store.schemesstore'，{
extends：'Ext.data.TreeStore'，
model：'GridApp.model.schemesmodel' ，
autoLoad：true，

listeners：{
load：function（）{
console.log（'Schemes Data store loaded'）;

}，
root：{
text：Divisions，
expanded：true，
id：'NULL'
// children：
// {
// text：['name']，
//// id：'divsionnameid'，
//// leaf：true
//}]
}
}）;


我对Extjs很新了4.让我知道我在哪里错了。有关这方面的任何意见都将非常有帮助。

根据与@Izhaki的讨论更新了该问题。

解决方案

表示JSON中的子代的属性必须与您的读者的根属性相匹配。因为你是分区你的JSON应该是：

  {
divisions：[
 {
name：division1，
id：div1，
divisions：[
 {
name：Sub1Div1，
id：div1sub1，
divisions：[
 {
name：Scheme1，
id：scheme1
}，
 {
name：Scheme2，
id：scheme2
} 
] 
}，
 {
name：Sub2Div1，
id：div1sub2，
divisions：[
 {
name：Scheme3，
id：scheme3
} 
] 
} 
] 
 } 
] 
} 
  

另外，不要忘记 displayField：'name'在您的TreePanel配置。

I want to add nested data from JSON into a treepanel. My problem is that the tree is being listed for the number of JSON records (number of divisions, here 1 in the example) without any text. But when I select a child, it shows Uncaught TypeError: Cannot read property 'internalId' of undefined error. This is what I have tried so far.

JSON file (schemesInfo.json).

{
"divisions":[
{"name": "division1","id": "div1","subdivisions":[
    {"name": "Sub1Div1","id": "div1sub1","schemes":[
        {"name": "Scheme1","id": "scheme1"},
        {"name": "Scheme2","id": "scheme2"}]},
    {"name": "Sub2Div1","id": "div1sub2","schemes":[
        {"name": "Scheme3","id": "scheme3"}]}

]}]
}

Model : (schemesmodel.js)

   Ext.define('GridApp.model.schemesmodel',{
    extend: 'Ext.data.Model',
    fields: ['name','id'],
    proxy: {
        type: 'ajax',
        api: {
            read: 'data/schemesInfo.json'
        },
        reader: {
            type: 'json',
            root: 'divisions'
        }
    }
    });

Store : (schemesstore.js)

    Ext.define('GridApp.store.schemesstore',{
    extend: 'Ext.data.TreeStore',
    model: 'GridApp.model.schemesmodel',
    autoLoad: true,

    listeners: {
        load:function(){
            console.log('Schemes Data store loaded');
        }
    },
    root: {
        text: "Divisions",
        expanded: true,
        id: 'NULL'
//      children: [
//                 {
//                     text:['name'],
////                       id: 'divsionnameid',
////                       leaf: true
//                 }]
    }
});

I am pretty new to Extjs 4. Let me know where I am going wrong. Any points regarding this will be very helpful.

Updated the question based on the discussion with @Izhaki.

解决方案

The property that represents children in your JSON has to be consist and match the root property of your reader. As yours is divisions you JSON should be:

{
   "divisions":[
      {
         "name":"division1",
         "id":"div1",
         "divisions":[
            {
               "name":"Sub1Div1",
               "id":"div1sub1",
               "divisions":[
                  {
                     "name":"Scheme1",
                     "id":"scheme1"
                  },
                  {
                     "name":"Scheme2",
                     "id":"scheme2"
                  }
               ]
            },
            {
               "name":"Sub2Div1",
               "id":"div1sub2",
               "divisions":[
                  {
                     "name":"Scheme3",
                     "id":"scheme3"
                  }
               ]
            }
         ]
      }
   ]
}

Also, don't forget displayField: 'name' in your TreePanel configs.

这篇关于来自JSON的嵌套数据的Treepanel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！