Unable to render data into grid column using JSON results - json

Question

I have a grid store with something like this.
var gridStore = Ext.create('Ext.data.Store',{
proxy : {
type : 'ajax',
actionMethods : {
read : 'POST'
},
url : 'getECIAgentWrapperJobs.do',
reader : {
type : 'json',
rootProperty : 'rows',
totalProperty : 'results'
}
},
pageSize : 3,
autoLoad : {start: 0, limit: 3}
});
Clearly it makes an AJAX request to the url.
The JSON response that I am getting for this store looks something like this :
{
"results":2,
"rows":[
{
"pkTable1":1,
"name":"Rick",
"eciAgentJob":{
"pkTable2":11,
"name":"Play Local Ar",
},
}
],
"msg":null,
"success":true,
}
Now this is how my grid looks :
var mappedEciAgentJobsGrids = Ext.create('Ext.grid.Panel',{
store : gridStore,
columns : [
{
dataIndex : 'pkTable1',
header : 'Pk of table 1'
},
{
dataIndex : 'name',
header : 'Name'
},
{
dataIndex : 'eciAgentJob.pkTable2',
header : 'Pk of Table 2'
}
]
});
Now in my UI the first 2 columns(with dataIndex: pkTable2 and name respectively) load fine. But for the 3rd one it does not.
I know it is because I have used dataIndex as 'eciAgentJob.pkTable2'. But then what is that way to load data in columns when we get response like the way I got(where eciAgentJob is a object inside the original JSON).
Please help.
Edit : I dont want to use a renderer due to some other use case reasons.

Answer 1

Define a new field in your model and map with the required field. In convert function pick any value from the record.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string ' },
{
name: 'columnName',
convert: function (value, record) {
return "return what ever you want"
}
}
]
});