How do I construct a GRID using JSON, which JSON not having datas in one root.

[barun17]

I need to construct a grid using JSON, But the data are not in a single root.

I can able to map data in single root. But i am not able to display/map other datas(EmployeeId & EmployeeName).

Grid columns are,

• EmployeeId
• EmployeeName
• WebSite
• Year of Joining
• Contact Number
• Geo Location
• Extension

JSON:
(FileName : empdetails.json)
{
"EmployeeSummary": [
{
"EmployeeId": "1234",
"EmployeeName": "Arun",
"SuccessId": true,
"EmployeeDetails": [
{
"Label": "WebSite",
"Value": "http://www.arun.com"
},
{
"Label": "Year Of Joining",
"Value": "2000"
},
{
"Label": "Contact Number",
"Value": "987-654-3210"
},
{
"Label": "Geo Location",
"Value": "India"
},
{
"Label": "Extension",
"Value": "457896"
}
]
}
]
}

I tried with the below code:
Ext.require(['Ext.data.*', 'Ext.grid.*']);


Ext.define('Person', {
extend: 'Ext.data.Model',
fields: ['Label', 'Value']
});


Ext.onReady(function(){


var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Person',
proxy: {
type: 'rest',
url: 'data/empdetails.json',
reader: {
type: 'json',
root: 'EmployeeSummary[0].EmployeeDetails'
},
writer: {
type: 'json'
}
}
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
plugins: [rowEditing],
width: 400,
height: 300,
frame: true,
title: 'Sample Grid',
store: store,
iconCls: 'icon-user',
hideHeaders: true,
columns: [{
text: 'ID',
width: 150,
sortable: true,
dataIndex: 'Label'
}, {
text: 'Email',
flex: 1,
sortable: true,
dataIndex: 'Value',
field: {
xtype: 'textfield'
}
}]
});
});


I also attached code for more understanding.

[scottmartin]

Please see the following:
http://www.sencha.com/forum/showthread.php?219981

Regards,
Scott.