Question

我正在尝试将嵌套的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
}

Answer 1

我怀疑你可能会混淆与hasMany关系的简单父子关系。

但是对于你原来的问题。您正在返回一个节点（jane），它不是叶子，但没有返回子节点。由于Person的代理根为People，因此子属性也应为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
     }
  ]
}

Answer 2

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

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

2 个答案: