ExtJS 在网格中加载嵌套的 JSON 数据

Posted 2023-02-26

【中文标题】ExtJS 在网格中加载嵌套的 JSON 数据

【英文标题】：ExtJS loading nested JSON data in grid

【发布时间】：2014-03-05 11:30:41

【问题描述】：

我有一个 php 脚本，它返回以下 JSON

[
   
      "Code":0,
      "Message":"No problem"
   ,
   
      "name":"o016561",
      "status":1,
      "locks":[
         
            "ztn":"155320",
            "dtn":"20131111",
            "idn":"78"
         ,
         
            "ztn":"155320",
            "dtn":"20131111",
            "idn":"91"
         
      ]
   ,
   
      "name":"o011111",
      "status":1,
      "locks":[
         
            "ztn":"155320",
            "dtn":"20131111",
            "idn":"91"
         
      ]
   ,
   
      "name":"o019999",
      "status":0,
      "locks":[

      ]
   ,
   
      "name":"o020000",
      "status":0,
      "locks":[

      ]
   ,
   
      "name":"o020001",
      "status":0,
      "locks":[

      ]
   
]

编辑： 网格应如下所示：

我已经能够将 name 和 status 加载到我的网格中 - 到目前为止一切顺利。但更重要的部分是，我需要将locks-array 中的嵌套数据加载到我的网格中，但我无法让我的代码正常工作。任何帮助将不胜感激。

如果这很重要，我正在使用 ExtJS 4.2。

编辑 2：

我试过了

Ext.define("Locks", 
    extend: 'Ext.data.Model',
    fields: [
        'ztn',
        'dtn',
        'idn'
    ]
);

Ext.define("ConnectionModel", 
    extend: 'Ext.data.Model',
    fields: ['name', 'status'],
    hasMany: [
        model: 'Locks',
        name: 'locks'
    ]
);

var store = Ext.create('Ext.data.Store', 
    model: "ConnectionModel",
    autoLoad: true,
    proxy: 
        type: 'ajax',
        reader: 
            type: 'json',
            root: 'name'
        
    
);

但它似乎在很多方面都是错误的...... 如果ztn 和dtn 可以在同一列中以空格分隔，那就太棒了

【问题讨论】：

网格应该是什么样子的？哪些栏目？

@Indianer 我刚刚编辑了原帖

把你的模型定义放在这里..

您有一个可能被锁定的项目数组，但是在您的网格中它显示 ztn + dtn，您是否要将数组中的所有相应值相加到该字段中？

【参考方案1】：

您可以在列中添加renderer。在该渲染器中，您可以对记录执行任何操作...

这是一个有效的小提琴： http://jsfiddle.net/Vandeplas/MWeGa/3/

Ext.create('Ext.grid.Panel', 
    title: 'test',
    store: store,
    columns: [
        text: 'Name',
        dataIndex: 'name'
    , 
        text: 'Status',
        dataIndex: 'status'
    , 
        text: 'idn',
        renderer: function (value, metaData, record, rowIdx, colIdx, store, view) 
            values = [];
            record.locks().each(function(lock)
                values.push(lock.get('idn'));
            );
            return values.join('<br\>');
        
    , 
        text: 'ztn + dtn',
        renderer: function (value, metaData, record, rowIdx, colIdx, store, view) 
            values = [];
            record.locks().each(function(lock)
                values.push(lock.get('ztn') + ' ' + lock.get('dtn'));
            );
            return values.join('<br\>');
        
    ],
    height: 200,
    width: 600,
    renderTo: Ext.getBody()
);

注意

如果您可以控制您的后端，您最好更改数据的形式，如下所示：

    "code": 0,
    "message": "No problem",
    "success": true,
    "data": [
        
            "name": "o016561",
            "status": 1,
            "locks": [
                
                    "ztn": "155320",
                    "dtn": "20131111",
                    "idn": "78"
                ,
                
                    "ztn": "155320",
                    "dtn": "20131111",
                    "idn": "91"
                
            ]
        ,
        
            "name": "o011111",
            "status": 1,
            "locks": [
                
                    "ztn": "155320",
                    "dtn": "20131111",
                    "idn": "91"
                
            ]
        
    ]

这样您就不会将您的控制数据（成功、消息、代码......）与您的数据混合在一起，并且代理会正确地提取它（这可能是您遇到问题的原因）。我添加了一个成功布尔值 => Ext 将其拾取并转到失败处理程序。它对您的异常处理有很大帮助。

这是它的代理：

proxy: 
    type: 'ajax',
        api: 
        read: ___URL____
    ,
    reader: 
        type: 'json',
        root: 'data',
        messageProperty: 'message'
    

【讨论】：

好吧...出现了一些意想不到的Uncaught TypeError: Cannot read property 'Container' of undefined 。我对 ExtJS 很陌生，所以这是什么意思？

在我的例子中？奇怪..我无法重现它......基本上它的意思是：你有一个对象，例如； a 你尝试做a.Container => 但a 是undefined 所以它没有属性Container.. 大部分时间不是因为缺少逗号或一些愚蠢的东西......

如果它在恢复到该点并插入 2 列之前有效

aah 这是一些 n00bish 拼写错误...非常感谢您提供的其他答案！

@VDP您能否提出一个不使用渲染器的解决方案。我们不能以某种方式使用 dataIndex 吗？