在 ExtJS4 TreeGrid 中加载嵌套的 JSON 数据

Posted 2023-02-26

【中文标题】在 ExtJS4 TreeGrid 中加载嵌套的 JSON 数据

【英文标题】：Loading Nested JSON Data in ExtJS4 TreeGrid

【发布时间】：2012-06-27 21:18:22

【问题描述】：

我正在尝试将嵌套的 JSONData 加载到我的树形网格中。在第一次调用获取数据时，填充网格所需的所有数据都作为 JSON 对象在响应中返回。但是我可以看到它仍然尝试为网格中的所有父对象获取数据。

即使在虚假 GET 之后，它仍然无法填充子节点。

我定义了 2 个模型，具有“hasMany”关系的父节点指代子模型，而具有“BelongsTo”关系的子节点指代父模型

我正在使用带有 JSON 阅读器的 Ajax 代理。

在网上搜索我找不到太多信息，我使用了 extJS 文档中的 user-orderitems-products 示例来尝试设置我的模型和树。

我不完全确定我错过了什么。任何帮助将不胜感激。

JSON（人可能有也可能没有子对象）：

People: 
 firstName: john, id:123, uniqueID:1231, leaf:true,
 firstName: jane, id:124, uniqueID:1240, 
  offspring:[
    firstName: adam,    id:124,  uniqueID:1241, leaf:true,
    firstName: brandon, id:124,  uniqueID:1242, leaf:true,
    firstName: claire,  id:1243, uniqueID:1243, leaf:true
 ]

型号：

Ext.define('Person',
  extend: 'Ext.data.Model',
  fields: [
    name: 'firstName', type:'string',
    name: 'uniqueID',  type:'float'
    hasMany: 
       model:'Offspring', 
       name: 'Offspring', 
       associationKey: 'offspring',
       primaryKey: 'uniqueID',
       foreignKey: 'id'
    
  ],
  proxy: 
   type: 'rest',
   url: 'http://blah/blah',
   reader: 
     type: 'json',
     root: 'People'
   

  
);

Ext.define('Offspring',
  extend: 'Ext.data.Model',
  fields: [
    name: 'firstName', type:'string',
    name: 'uniqueID',  type:'float'
 ],
 belongsTo: 'Person'
);

商店定义：

var store = Ext.create('Ext.data.TreeStore', 
  model: 'Person',
  folderSort: true

【问题讨论】：

能否请您向我们展示一下 JSON 响应和模型定义？

【参考方案1】：

我怀疑您可能将简单的父子关系与 hasMany 关系混淆了。

但是对于您最初的问题。您正在返回一个不是叶子但没有返回子节点的节点 (jane)。由于Person 的代理根是People，所以children 属性也应该是people。

我相信以下 JSON 对您有用：

People: 
    firstName: john, id:123, uniqueID:1231, leaf:true,
    firstName: jane, id:124, uniqueID:1240, 
    People:[
        firstName: adam,    id:124,  uniqueID:1241, leaf:true,
        firstName: brandon, id:124,  uniqueID:1242, leaf:true,
        firstName: claire,  id:1243, uniqueID:1243, leaf:true
    ]

这是一个工作代码：

型号：

Ext.define('BS.model.ItemCategory', 
    extend: 'Ext.data.Model',
    fields: [
        name: 'name'     , type: 'string',
        name: 'iconCls'  , type: 'string', defaultValue: 'treenode-no-icon',
        name: 'leaf'     , type: 'boolean', defaultValue: false,
        name: 'expanded' , type: 'boolean', defaultValue: true, persist: false,
        name: 'index'     , type: 'int',        
    ],

    proxy: 
        type: 'direct',

        api: 
            create:  ItemCategories.Create,
            read:    ItemCategories.Read,
            update:  ItemCategories.Update,
            destroy: ItemCategories.Destroy,
        ,
    ,

);

商店：

Ext.define('BS.store.ItemCategories', 

    extend: 'Ext.data.TreeStore',    
    model: 'BS.model.ItemCategory',

    autoSync: true,

    root: 
        text: 'Root',
        id: 'NULL',
        expanded: true
    ,

    clearOnLoad: true,
);

JSON：

"result":
  "success":true,
  "children":[
     
        "id":"1",
        "parentId":null,
        "name":"DFM",
        "index":"0",
        "deleted":"0",
        "children":[
           
              "id":"6",
              "parentId":"1",
              "name":"Studios",
              "index":"0",
              "deleted":"0",
              "loaded":true,
              "leaf":false
           ,
           
              "id":"7",
              "parentId":"1",
              "name":"Equipment",
              "index":"1",
              "deleted":"0",
              "children":[
                 
                    "id":"18",
                    "parentId":"7",
                    "name":"Cameras",
                    "index":"0",
                    "deleted":"0",
                    "loaded":true,
                    "leaf":false
                 ,
                 
                    "id":"20",
                    "parentId":"7",
                    "name":"Tripods",
                    "index":"1",
                    "deleted":"0",
                    "loaded":true,
                    "leaf":false
                 ,
                 
                    "id":"26",
                    "parentId":"7",
                    "name":"Lighting Kits",
                    "index":"2",
                    "deleted":"0",
                    "loaded":true,
                    "leaf":false
                 
              ],
              "leaf":false
           
        ],
        "leaf":false
     ,
     
        "id":"3",
        "parentId":null,
        "name":"3D",
        "index":"2",
        "deleted":"0",
        "loaded":true,
        "leaf":false
     
  ]

【讨论】：

当我尝试得到：'节点未定义'。当它通过 appendChild 方法解析并尝试做 oldParent=node.parentNode

即使我添加“人”作为子节点并删除模型中的许多属于定义，我仍然会收到错误。

这很可能是因为 ExtJS 没有使用 NodeInterface 包装模型。您可以尝试通过扩展 Ext.data.TreeStore 的商店加载吗？

我当前的存储是 Ext.data.TreeStore 的一个实例。为原始问题添加了定义。我应该明确扩展树库吗？

我不确定，但我会尝试一下，因为商店有一些代码明确地处理子类及其模型。

【参考方案2】：

SDK 下载中有一个完全这样的示例：http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/treegrid.html

【讨论】：

我开始使用它作为我的模板代码。我试图理解为什么我不能让我的树渲染事件，尽管这个例子确实如此。

即使在我格式化 JSON 使其看起来像该示例中的 JSON（使用文本：“。”和子名称“children”）之后，我仍然收到节点未定义错误。跨度>