Ext js - bind Model column to complex json object

Question

I am trying to associate a complex json object (with nested properties) with a GridPanel column model. IE: I want to map the grid columns, 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 column model will look 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, write me an example? Or do I just need to “smooth out” an object before I read it? Many thanks!

Answer 1

If you are using JsonReader or JsonStore, you can set the property mapping of the value of the nested object in the entry description:

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

Then your column model references dataIndex "detail" for that column.

The data sent by your server should be different from what is contained in your example. The above reader will use the form data object:

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