带有来自 JSON 的嵌套数据的树面板 [英] Treepanel with nested data from JSON

问题描述

我想将 JSON 中的嵌套数据添加到树面板中.我的问题是树被列出的 JSON 记录数(分区数，在示例中为 1)，没有任何文本.但是当我选择一个孩子时，它显示 Uncaught TypeError: Cannot read property 'internalId' of undefined 错误.这是我迄今为止尝试过的.

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 文件 (schemesInfo.json).

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"}]}

]}]
}

模型:(schemesmodel.js)

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'
        }
    }
    });

商店:(schemesstore.js)

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
//                 }]
    }
});

我对 Extjs 4 还很陌生.让我知道我哪里出错了.任何与此相关的观点都会非常有帮助.

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

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

Updated the question based on the discussion with @Izhaki.

推荐答案

JSON 中代表子项的属性必须与阅读器的 root 属性一致并匹​​配.由于您的是 divisions，您的 JSON 应该是:

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"
                  }
               ]
            }
         ]
      }
   ]
}

另外，不要忘记 displayField: 'name' 在你的 TreePanel 配置中.

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

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