Mapping nested data

[brunoferoleto]

How can I map a json nested data?

I have something like this:




{
"items": [
{
"idPrograma": "8",
"descricaoPrograma": "PROG",
"Grupo": [
{
"idGrupo": "1",
"descricaoGrupo": "Grupo1",
"SubGrupo": [
{
"idSubGrupo": "1",
"descricaoSubGrupo": "Sub1",
},
{
"idSubGrupo": "2",
"descricaoSubGrupo": "Sub2",
}
]
}
]
}
]
}



How can I put "idSubGrupo" in a grid?

I'm doing something like this, but doesn't work and I think mapping could help me, but I don't know how to use it.




Ext.create('Ext.grid.Panel',{
store: Ext.create('EGPE.store.StoreValoresMesesEstruturado',{}),

columns: [
{
text: 'SubGrupo',
dataIndex: 'idSubGrupo'
}
]
})



The store:




Ext.define('EGPE.store.StoreValoresMesesEstruturado', {
extend: 'Ext.data.Store',
model: 'EGPE.model.ModelValoresMesesEstruturado',

proxy: {
type: 'ajax',
url: 'data/ValoresMesesEstruturado.json',
reader: {
type: 'json',
root: 'items'
}
},

autoLoad: true
});




And the model:




Ext.define('EGPE.model.ModelValoresMesesEstruturado', {
extend: 'Ext.data.Model',
fields: ['idPrograma', 'descricaoPrograma'],


hasMany : {model: 'EGPE.model.ModelGrupo', name: 'Grupo', associationKey: 'Grupo'}
});


Ext.define('EGPE.model.ModelGrupo', {
extend: 'Ext.data.Model',
fields: ['idGrupo', 'descricaoGrupo'],


hasMany : {model: 'EGPE.model.ModelSubGrupo', name: 'SubGrupo', associationKey: 'SubGrupo'}
});


Ext.define('EGPE.model.ModelSubGrupo', {
extend: 'Ext.data.Model',
fields: ['idSubGrupo', 'descricaoSubGrupo']
});

[mitchellsimoens]

You can use the renderer (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column-cfg-renderer) config on the column. In there you have access to the record and can then get access to the associated data. You just need to return a string that will be displayed in the cell.