ExtJs 加载嵌套的 JSON 数据 MVC答案

【问题标题】：ExtJs loading nested JSON data MVCExtJs 加载嵌套的 JSON 数据 MVC
【发布时间】：2014-03-10 13:37:45
【问题描述】：

我知道这已经讨论过很多次了，但我就是无法让我的代码正常工作... 所以我有一个返回以下 JSON 的 PHP 脚本。

我希望将数据加载到这样的网格中：

名称 |状态 | ztn |大通|身份证

{
   "success":true,
   "code":0,
   "message":"works",
   "data":[
      {
         "name":"connection1",
         "status":1,
         "locks":[
            {
               "ztn":"abc",
               "dtn":"def",
               "idn":"123"
            },
            {
               "ztn":"ghi",
               "dtn":"jkl",
               "idn":"456"
            }
         ]
      },
      {
         "name":"connection2",
         "status":1,
         "locks":[
            {
               "ztn":"mno",
               "dtn":"pqr",
               "idn":"789"
            }
         ]
      }

我的店铺是这样设置的：

Ext.define('VPN.store.Connections', {
    extend: 'Ext.data.Store',
    id: 'connectionStore',
    requires: [
        'VPN.model.Connection',
        'VPN.model.ConnectionLocks'
    ],
    model: "VPN.model.Connection",
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'api/router.php',
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

我的第一个模型如下所示：

Ext.define("VPN.model.Connection", {
    extend: 'Ext.data.Model',
    id: 'connectionModel',
    fields: ['name', 'status'],
    hasMany: {
        model: 'VPN.model.ConnectionLocks',
        name: 'locks'
    }
});

我的第二个模型是这样的：

Ext.define("VPN.model.ConnectionLocks", {
    extend: 'Ext.data.Model',
    id: 'connectionLocksModel',
    fields: ['ztn', 'dtn', 'idn'],
    belongsTo: 'VPN.model.Connections'
});

网格的商店是VPN.model.Connections。 name 和status 显示正确，但是锁的ztn、dtn 和idn 没有显示... 那么我的错误在哪里？

【问题讨论】：

您可以在每个Connection 项目上查询生成的嵌套store，就像store.data.items[0].locks() 一样。这不会为Connection 项目返回正确的ConnectionLocks 商店项目吗？
我对 ExtJS 尤其是 MVC 还是很陌生。那么我必须在哪里运行呢？我总是得到store is undefined 或Cannot call method 'locks' of undefined...
需要找到对应的父商店。这是一个全内联示例：Ext.getStore('Connections').data.items[0].locks()
通过我看到的控制台，它返回了正确的ConnectionLocks。但是我怎样才能将它们加载到我的网格中呢？例如，我必须使用哪个dataIndex？
嗯，商店之间是一对多的关系。所以在当前网格中显示它们会很困难。网上有向网格添加扩展器以中继数据的示例。或者有时，我会添加第二个网格来显示子商店。

标签： json extjs extjs-mvc

【解决方案1】：

我终于找到了解决方法。这是我发现并更改的 sn-p 的一部分。我用以下代码替换了store-definition 中的dataIndex

renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
                values = [];
                record.locks().each(function(lock) {
                    values.push(lock.get('idn'));
                });
                return values.join(', ');
            }

【讨论】：