subarray models mapping issues with gridpanel extjs 4 - extjs4

Question

stackoverflow team member I am having problem with displaying the json subarray data to my gridpanel my json data is below
{
"total": 11,
"success": true,
"employeetaskdetdata": [{
"subject": "Work in progress",
"employee": {
"username": "yogen",
"designation": {
"department": {
"company": {
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "yaryan997#gmail.com",
"cmpemail2": "yaryan997#gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1335764510000,
"cmpmodifiedon": 1335764510000,
"cmpmodifiedby": 0,
"id": 1
},
"departname": "Programmer",
"createdby": 1,
"createdon": 1335764655000,
"modifiedby": 1,
"modifiedon": 1335764655000,
"departdescr": "<b>?Programmer</b>",
"id": 2
},
"createdby": 1,
"createdon": 1335764825000,
"modifiedby": 1,
"modifiedon": 1335764825000,
"designame": "Senior JAVA Programmer",
"desigdescr": "<b>?Senior JAVA Programmer</b>",
"id": 6
},
"createdby": 1,
"createdon": 1335765074000,
"modifiedby": 1,
"modifiedon": 1335765074000,
"dateofbirth": 1335810600000,
"joindate": 1337106600000,
"firstname": "Yogendra",
"surname": "Singh",
"gender": "M",
"marital": "U",
"nationality": "",
"contactno": "",
"mobileno": "",
"email": "",
"otheremail": "",
"fathername": "",
"mothername": "",
"accountno": "",
"salary": "",
"bank": {
"bankname": "ICICI Bank",
"bankaddress": "ICICI Bank Nanpura",
"id": 1
},
"address": "",
"id": 6,
"password": "123"
},
"todaysdate": "2012-05-05",
"createdby": 6,
"createdon": 1336203851000,
"modifiedby": 6,
"modifiedon": 1336203851000,
"project": {
"company": {
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "yaryan997#gmail.com",
"cmpemail2": "yaryan997#gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1335764510000,
"cmpmodifiedon": 1335764510000,
"cmpmodifiedby": 0,
"id": 1
},
"createdby": 1,
"createdon": 1335765435000,
"modifiedby": 1,
"modifiedon": 1335765435000,
"projectname": "Project I",
"projecttitle": "Project I",
"projectdesc": "<b>Kintu Design Pvt ltd new Project I</b>",
"projectstart": 1335810600000,
"projectend": 1336761000000,
"id": 1
},
"task": {
"duration": 4.0,
"employee": [{
"username": "hiren",
"designation": {
"department": {
"company": {
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "yaryan997#gmail.com",
"cmpemail2": "yaryan997#gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1335764510000,
"cmpmodifiedon": 1335764510000,
"cmpmodifiedby": 0,
"id": 1
},
"departname": "Programmer",
"createdby": 1,
"createdon": 1335764655000,
"modifiedby": 1,
"modifiedon": 1335764655000,
"departdescr": "<b>?Programmer</b>",
"id": 2
},
"createdby": 1,
"createdon": 1335764755000,
"modifiedby": 1,
"modifiedon": 1335764755000,
"designame": "Senior PHP Programmer",
"desigdescr": "<b>?Senior PHP Programmer</b>",
"id": 3
},
"createdby": 1,
"createdon": 1335765018000,
"modifiedby": 1,
"modifiedon": 1335765018000,
"dateofbirth": null,
"joindate": null,
"firstname": "Hiren",
"surname": "Patel",
"gender": "M",
"marital": "U",
"nationality": "",
"contactno": "",
"mobileno": "",
"email": "",
"otheremail": "",
"fathername": "",
"mothername": "",
"accountno": "",
"salary": "",
"bank": {
"bankname": "ICICI Bank",
"bankaddress": "ICICI Bank Nanpura",
"id": 1
},
"address": "",
"id": 4,
"password": "123"
}, {
"username": "yogen",
"designation": {
"department": {
"company": {
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "yaryan997#gmail.com",
"cmpemail2": "yaryan997#gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1335764510000,
"cmpmodifiedon": 1335764510000,
"cmpmodifiedby": 0,
"id": 1
},
"departname": "Programmer",
"createdby": 1,
"createdon": 1335764655000,
"modifiedby": 1,
"modifiedon": 1335764655000,
"departdescr": "<b>?Programmer</b>",
"id": 2
},
"createdby": 1,
"createdon": 1335764825000,
"modifiedby": 1,
"modifiedon": 1335764825000,
"designame": "Senior JAVA Programmer",
"desigdescr": "<b>?Senior JAVA Programmer</b>",
"id": 6
},
"createdby": 1,
"createdon": 1335765074000,
"modifiedby": 1,
"modifiedon": 1335765074000,
"dateofbirth": 1335810600000,
"joindate": 1337106600000,
"firstname": "Yogendra",
"surname": "Singh",
"gender": "M",
"marital": "U",
"nationality": "",
"contactno": "",
"mobileno": "",
"email": "",
"otheremail": "",
"fathername": "",
"mothername": "",
"accountno": "",
"salary": "",
"bank": {
"bankname": "ICICI Bank",
"bankaddress": "ICICI Bank Nanpura",
"id": 1
},
"address": "",
"id": 6,
"password": "123"
}],
"createdby": 1,
"createdon": 1336460152000,
"modifiedby": 1,
"modifiedon": 1336460152000,
"project": {
"company": {
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "yaryan997#gmail.com",
"cmpemail2": "yaryan997#gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1335764510000,
"cmpmodifiedon": 1335764510000,
"cmpmodifiedby": 0,
"id": 1
},
"createdby": 1,
"createdon": 1335765435000,
"modifiedby": 1,
"modifiedon": 1335765435000,
"projectname": "Project I",
"projecttitle": "Project I",
"projectdesc": "<b>Kintu Design Pvt ltd new Project I</b>",
"projectstart": 1335810600000,
"projectend": 1336761000000,
"id": 1
},
"percentdone": 55,
"durationunit": "d",
"startdate": 1336415400000,
"parentid": 2,
"taskindex": 0,
"taskname": "Sub Task 2 1",
"enddate": 1336761000000,
"priority": 2,
"id": 3,
"depth": 2
},
"percentdone": 20,
"totalworkedhrs": -9.5,
"starttime": "09:00:00",
"finishtime": "00:00:00",
"id": 1,
"description": "<b>Work in progress</b>",
"hours": 0,
"minutes": 30
}, {
"subject": "Work in progresss",
"employee": {
"username": "yogen",
"designation": {
"department": {
"company": {
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "yaryan997#gmail.com",
"cmpemail2": "yaryan997#gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1335764510000,
"cmpmodifiedon": 1335764510000,
"cmpmodifiedby": 0,
"id": 1
},
"departname": "Programmer",
"createdby": 1,
"createdon": 1335764655000,
"modifiedby": 1,
"modifiedon": 1335764655000,
"departdescr": "<b>?Programmer</b>",
"id": 2
},
"createdby": 1,
"createdon": 1335764825000,
"modifiedby": 1,
"modifiedon": 1335764825000,
"designame": "Senior JAVA Programmer",
"desigdescr": "<b>?Senior JAVA Programmer</b>",
"id": 6
},
"createdby": 1,
"createdon": 1335765074000,
"modifiedby": 1,
"modifiedon": 1335765074000,
"dateofbirth": 1335810600000,
"joindate": 1337106600000,
"firstname": "Yogendra",
"surname": "Singh",
"gender": "M",
"marital": "U",
"nationality": "",
"contactno": "",
"mobileno": "",
"email": "",
"otheremail": "",
"fathername": "",
"mothername": "",
"accountno": "",
"salary": "",
"bank": {
"bankname": "ICICI Bank",
"bankaddress": "ICICI Bank Nanpura",
"id": 1
},
"address": "",
"id": 6,
"password": "123"
},
"todaysdate": "2012-05-05",
"createdby": 6,
"createdon": 1336204557000,
"modifiedby": 6,
"modifiedon": 1336204557000,
"project": {
"company": {
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "yaryan997#gmail.com",
"cmpemail2": "yaryan997#gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1335764510000,
"cmpmodifiedon": 1335764510000,
"cmpmodifiedby": 0,
"id": 1
},
"createdby": 1,
"createdon": 1335765435000,
"modifiedby": 1,
"modifiedon": 1335765435000,
"projectname": "Project I",
"projecttitle": "Project I",
"projectdesc": "<b>Kintu Design Pvt ltd new Project I</b>",
"projectstart": 1335810600000,
"projectend": 1336761000000,
"id": 1
},
"task": {
"duration": 4.0,
"employee": [{
"username": "hiren",
"designation": {
"department": {
"company": {
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "yaryan997#gmail.com",
"cmpemail2": "yaryan997#gmail.com",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1335764510000,
"cmpmodifiedon": 1335764510000,
"cmpmodifiedby": 0,
"id": 1
},
"departname": "Programmer",
"createdby": 1,
"createdon": 1335764655000,
"modifiedby": 1,
"modifiedon": 1335764655000,
"departdescr": "<b>?Programmer</b>",
"id": 2
},
"createdby": 1,
"createdon": 1335764755000,
"modifiedby": 1,
"modifiedon": 1335764755000,
"designame": "Senior PHP Programmer",
"desigdescr": "<b>?Senior PHP Programmer</b>",
"id": 3
},
"createdby": 1,
"createdon": 1335765018000,
"modifiedby": 1,
"modifiedon": 1335765018000,
"dateofbirth": null,
"joindate": null,
"firstname": "Hiren",
"surname": "Patel",
"gender": "M",
"marital": "U",
"nationality": "",
"contactno": "",
"mobileno": "",
"email": "",
"otheremail": "",
"fathername": "",
"mothername": "",
"accountno": "",
"salary": "",
"bank": {
"bankname": "ICICI Bank",
"bankaddress": "ICICI Bank Nanpura",
"id": 1
},
"address": "",
"id": 4,
"password": "123"
}]
}
and my model is below
Ext.define('DEV.model.employeetaskdetModel', {
extend: 'Ext.data.Model',
fields : [
{ name: 'id'},
{ name: 'taskname', mapping:'task.taskname'},
{ name: 'firstname', mapping: 'employee.firstname'},
{ name: 'employee',type: 'auto'},
{ name: 'percentdone'}
]
});
and my grid panel columns are below
columns: [ {
xtype: 'gridcolumn',
dataIndex: 'percentdone',
text: 'Percent Done'
}, {
xtype: 'gridcolumn',
dataIndex: 'firstname',
text: 'First Name'
}]
I am not able to show the firstname in my gridPanel. But when I change the firstname column with below code it shows me the firstname gridpanel correctly.
{
xtype: 'gridcolumn',
dataIndex: 'employee',
text: 'User Name',
renderer: function (employee) {
var result = [];
employee = employee || [];
var value = employee.firstname;
if (value) {
result.push(value);
}
return result;
console.log(employee.firstname);
}
},
please suggest me why my gridpanel didn't show the firstname of user directly. What's the problem with my code. And why its showing the data when I add the renderer function.

Answer 1

I encountered a similar problem and solve it.
Mapping property is not required for mapping nested json data.
Model:
Ext.define("Model", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name.name"},
{name: "phone", mapping: "name.phone"},
{name: "descr", type: "string", mapping:'description'}
]
});
Store with data that we will recieve from jsfiddle test echo ajax service:
var Store = Ext.create("Ext.data.Store", {
model: "Model",
autoLoad: true,
proxy: {
type: 'ajax',
url: '/echo/json/',
//
actionMethods: {read: 'POST'}, // echo ajax service required
extraParams: {
json: Ext.JSON.encode({
root: [
{id: 1, name: {name:"John", phone: "123"}, description:"Fapfapfap"},
{id: 2, name: {name:"Danny", phone: "234"}, description:"Boobooboo"},
{id: 3, name: {name:"Tom", phone: "345"}, description:"Tralala"},
{id: 4, name: {name:"Jane", phone: "456"}, description:"Ololo"},
]
})
},
reader: {
type: 'json',
root: 'root'
}
},
});
Grid:
Ext.create("Ext.grid.Panel", {
store: Store,
columns: [
{dataIndex: "id", header:"ID"},
{dataIndex: "name.name", header:"Name", flex: 1, editor: "textfield"},
{dataIndex: "phone", header:"Phone", flex: 1, editor: "textfield"},
{dataIndex: "descr", header: "Description", flex: 2, editor: "htmleditor"}
],
renderTo: Ext.getBody(),
});
This should work, if other problems is absent.
Here you can see work example http://jsfiddle.net/Fgh7z/1/