extjs - ext js - ColumnModel 绑定(bind)到一个复杂的 json 对象

Question

我正在尝试将复杂的 json 对象(具有嵌套属性)绑定(bind)到 GridPanel 的列模型。 IE:我想将网格列映射到，比如说，report.customer_name 和 report.report_data.customer.desc
测试数据:

> {
>     "success": true ,
>     "total": "1",
>     "result": 
>         {
>             "report": {
>                 "customer_name": "cust one",
>                 "account_number": "",
>                 "report_data": {
>                     "detail": "these are details",
>                     "desc": "mydesc"                        
>                 }
>             }
>        } }

所以我的 columnmodel 会是这样的

var colModel = new Ext.grid.ColumnModel([
        {header: "Customer", sortable: true, dataIndex: 'customer_name'},
        {header: "Account", width: 75, sortable: true, dataIndex: 'account_number'},
        {header: "Detail", width: 75, sortable: true, dataIndex:'HOW DO I DO THIS'}
    ]);

我尝试将 Detail 列的 dataIndex 设置为“report_data.details”，但它不起作用......

有人可以告诉我这是否可以做到，如果可以，请给我举个例子？
还是我只需要在阅读之前“压平”对象？
非常感谢!

Answer 1

如果您使用的是 JsonReader 或 JsonStore，您可以在记录描述中建立到嵌套对象值属性的映射:

new Ext.data.JsonReader({
    root: 'result',
    totalProperty: 'total',
    fields: [
        {name: 'customer_name'},
        {name: 'account_number'},
        {name: 'detail', mapping: 'report_data.detail'}
    ]
});

然后，您的列模型将引用该列的“详细信息”数据索引。

但是，您的服务器发送的数据必须与您的示例包含的数据略有不同。上述阅读器将使用以下形式的数据对象:

{
    "success": true,
    "total": 1,
    "result": [
        {
            "customer_name": "cust one",
            "account_number": "",
            "report_data": {
                "detail": "these are details",
                "desc": "mydesc"
            }
        }
    ]
}