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

Question

我有一个 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 可以在同一列中以空格分隔，那就太棒了

Answer 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'
    }
}