ext js - ColumnModel binding to a complex json object

Question

Hi, 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"
            }
        }
    ]
}

Answer 2

I also have similar problem. My JSON is like this

{ "pk": 9990, "title": "World Event", "description": "Description of World Event", "latitude": -39.3401010668836, "longitude": 156.222526547185, "autoAcceptAttendees": false, "idea": { "@idea_fk": "9840", "@idea_string": "World" }, "streetAddress": "World Event's street ad" }

I am trying to read value of @idea_string in the column of a grid and @idea_fk in the recordDef because I need to know the idea_fk when someone clicks on the ideaname in grid.

My recordDef declaration is like this

final RecordDef recordDef = new RecordDef(new FieldDef[] { new IntegerFieldDef("pk"), new StringFieldDef("idea", "idea.@idea_string"), new StringFieldDef("title"), new StringFieldDef("idea_pk", "idea.@idea_fk"), new StringFieldDef("streetAddress") });

JSON declaration is like this

JsonReader reader = new JsonReader(recordDef);
    reader.setRoot("events");
    reader.setTotalProperty("totalEvents");
    reader.setId("pk");

Column config is as follows

ColumnConfig ideaString = new ColumnConfig("Idea", "idea", 45, true);

    ColumnConfig eventTitle = new ColumnConfig("Title", "title", 45, true);

    ColumnConfig location = new ColumnConfig("Location", "streetAddress",
            30, true);

    ColumnModel columnModel = new ColumnModel(new ColumnConfig[] {
            ideaString, eventTitle, location});

But the problem is that the column under idea is empty and I don't have values for idea_fk. Is there anything which is not right in my code. Please help!