带有来自 JSON 的嵌套数据的树形面板答案

【问题标题】：Treepanel with nested data from JSON带有来自 JSON 的嵌套数据的树形面板
【发布时间】：2012-08-15 22:17:51
【问题描述】：

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

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',{
    extend: 'Ext.data.Model',
    fields: ['name','id'],
    proxy: {
        type: 'ajax',
        api: {
            read: 'data/schemesInfo.json'
        },
        reader: {
            type: 'json',
            root: 'divisions'
        }
    }
    });

商店：(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 很陌生。让我知道我哪里出错了。任何与此相关的观点都会非常有帮助。

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

【问题讨论】：

模型没有id 配置，你是不是把它和`idProperty'混淆了？
此外，从您的代码看来，subdivisions 和 schemes 都不应该在树上显示为子级。对吗？
@Izhaki，是的。刚看到那个。我对 idProperty 感到困惑。对于你的第二个，我希望所有的孩子都被展示出来..
@Izhaki，也不知道孩子们怎么表现出来..
嗯，TreePanel（和对应的TreeStore）处理的是同一个模型的父子关系。即，所有节点都必须基于相同的模型。使用 hasMany 是相当不同的事情，不会帮助您在树上显示数据层次结构。因为你所有的模型都有相同的 id/name 字段。为什么不只使用单一模型？

标签： json sencha-touch extjs4 extjs

【解决方案1】：

在您的 JSON 中表示子项的属性必须包含并匹配您的阅读器的 root 属性。正如你的 divisions 你的 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"
                  }
               ]
            }
         ]
      }
   ]
}

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

【讨论】：

感谢您的帮助.. 但是如果假设我收到的 JSON 就像我在问题中发布的那样.. 在这种情况下，我如何用父子关系形成一个树形面板?有什么建议吗？？
顺便说一句，我还在调查。
嗨 liaK，我已经得到了答案，但我认为最好将这个问题作为一个单独的问题发布，因为我相信将来会有很多人提到它。我相信问题的标题应该是“从带有不同子字段的 JSON 加载 TreeStore”，并以您的 json 为例。我正在开发一个 JsFiddle 来展示它是如何完成的。
我为此添加了一个单独的问题。