ext js - привязка ColumnModel к сложному объекту json

Question

Я пытаюсь связать сложный объект json (с вложенными свойствами) с моделью столбца 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"                        
>                 }
>             }
>        } }

так что моя столбцовая модель будет что-то вроде

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'}
    ]);

Я пытался использовать dataIndex столбца Detail как 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'}
    ]
});

Ваша модель столбца будет тогда ссылаться на dataIndex 'detail' для этого столбца.

Однако данные, отправляемые вашим сервером, должны немного отличаться от того, что содержится в вашем примере. Приведенный выше читатель будет использовать объект данных в форме:

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