ext js - ColumnModel binding to a complex json object

Question

I am trying to bind a complex json object (with nested properties) to the column model of a GridPanel. IE: I want to map the grids columns to,say, report.customer_name and report.report_data.customer.desc test data:

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

so my columnmodel would be something like

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

I tried the dataIndex of the Detail column as 'report_data.details' but it did not work...

Can someone tell me if this can be done, and if so, throw an example at me ? Or do i just need to 'flatten' the object before I read it? thanks very much!

Answer 1

If you are using a JsonReader or JsonStore you can establish a mapping to a property of a nested object value in the record description:

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

Your column model would then reference a dataIndex of 'detail' for that column.

The data your server sends would have to be slightly different from what your example contains, however. The above reader would consume a data object of the form:

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