Accessing complex Json data in grid

[rishisaraf11]

Hi Guys,

I have complex Json structure where some of the fields reside in sub objects. When I am trying to access those fields in grid I am not getting a data. Below is a example where I am trying to see city ="London" in city column of grid however its not coming. Please help.


Ext.onReady(function() {

var myData = [{
company : 'Alcoa Inc',
price :'83.81',
lastChange :'9/1 12:00am',
address : {
city : 'London'
}
}];

Ext.define('DataModel', {
extend: 'Ext.data.Model',
fields: ['company', 'price' ,'lastChange',{name : 'city' , mapping : 'address.city'} ]
});


var store = Ext.create('Ext.data.Store', {
storeId: 'dataModel',
model: 'DataModel',
data: myData,
});


var panel = Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
width : 600,
height : 400,
layout : {
type : 'hbox',
align : 'stretch'
},

items : [
{
xtype : 'gridpanel',
flex : 1,
store : store,
title : 'Left Grid',
scroll : true,
border : false,
id : 'leftGrid',
columns : [
{
text : 'Company',
flex : 1,
sortable : true,
dataIndex : 'company'
},
{
text : 'City',
flex : 1,
sortable : true,
dataIndex : 'city'
}
],
viewConfig : {
stripeRows : true
}
},
{
xtype : 'tabpanel',
flex : 1,
id : 'tabpanel',
items : [
{
xtype : 'gridpanel',
title : 'Grid 1',
id : 'tabgrid1',
store : store,
columnLines: true,
columns : [
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex : 'price'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex : 'lastChange'
}
],
viewConfig : {
stripeRows : true
}
}
]
}
]
});


});

[skirtle]

I think the way you're doing it now bypasses the reader, which is where the mappings get applied.

Explicitly specifying a memory proxy will force the data through the reader:


var store = Ext.create('Ext.data.Store', {
storeId: 'dataModel',
model: 'DataModel',
data: myData,
proxy: 'memory'
});

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.Memory

I would say this is not exactly obvious.