How to Display Nested Json data in EXTJS 4 Grids? - json

Question

I am working on ExtJS 4.0 and I want to display nested JSON data in a grid. For this I use the example given in Ext.data.reader.Reader docs, "Loading Nested Data". It is good and simple but now I want to display this data in a grid. How do I set dataIndex?
This is my sample model and store:
Ext.define("data", {
extend: 'Ext.data.Model',
fields: ['year', 'state'],
hasMany: {
model: 'record',
name: 'record'
},
proxy: {
type: 'rest',
url: 'Column.json.php',
reader: {
type: 'json',
root: 'data'
}
}
});
Ext.define("record", {
extend: 'Ext.data.Model',
fields: ['id', 'autorization', 'expendture'],
belongsTo: 'User'
});
var store1 = new Ext.data.Store({
model: "data"
});
And my JSON:
{
"data": [{
"year": "2010",
"state": "MP",
"record": [{
"id": "auth",
"autorization": "9.201"
}, {
"id": "exp",
"expendture": "1.250"
}]
}]
}
I want to read autorization and expendture with id

Answer 1

You have to do it at the Model/Record level using the mapping confg in fields, so you'd do something like this:
Ext.define("record", {
extend: 'Ext.data.Model',
fields: [
'id',
{name: 'autorization', mapping: 'record[0].autorization'},
{name: 'expendture', mapping: 'record[1].expendture'}
],
belongsTo: 'User'
});
It's good to note that it is probably quicker to ask questions over on the Sencha Forums.

Answer 2

I want to point out that Store.loadData does not respect the field mapping
The issue is that the Sencha team changed loadData's behavior, AND it's not something that's documented in a way that is clear. So if you are using it, add the following to your code base (above your app code, but below ext-all.js):
Ext.override(Ext.data.Store, {
loadDataViaReader : function(data, append) {
var me = this,
result = me.proxy.reader.read(data),
records = result.records;
me.loadRecords(records, { addRecords: append });
me.fireEvent('load', me, result.records, true);
}
});
then use:
mystore.loadDataViaReader(data)