PDA

View Full Version : Nested json to grid



karthik_br
6 Jan 2011, 10:39 PM
Hello,

I am having issues with reading a nested json to store and then to grid. The following code does not produce anything in the grid. Please help!! Ultimately my aim to get a GroupingStore and display properties grouped by propertySetName.

JSON returned from webservice:

{
"total":"2",
"data":[
{
"properties":[
{
"id":"56d41d11-7626-478a-9534-ba9f978bc3e8",
"propertyName":"Name",
"stringValue":"2F.1"
},
{
"id":"94ca261e-7c4b-4c86-baa3-41b6b20f6985",
"propertyName":"Description",
"stringValue": "my name is 2F.1"
},
{
"id":"36980401-9597-4201-bcd7-cbcfb7e999e3",
"propertyName":"Long Name",
"stringValue":"2nd f.1"
}
],
"id":"f043e652-a7b6-4e88-a687-922f07b57135",
"propertySetName":"General",
"propertySetDisplayName":"General"
},
{
"properties":[
{
"id":"56d41d11-7626-478a-9534-ba93338bc3e8",
"propertyName":"Tag",
"stringValue":"2FF.1"
},
{
"id":"94ca261e-7c4b-4c86-baa3-41b4444f6985",
"propertyName":"Rating",
"stringValue":"1"
},
{
"id":"36980401-9597-4201-bcd7-cbc555599e3",
"propertyName":"Reference",
"stringValue":"abc"
}
],
"id":"f043e652-a7b6-4e88-a687-922f07777735",
"propertySetName":"ExtendedProp",
"propertySetDisplayName":"ExtendedProp"
}
]
}


Here is my javascript in which I am trying to use JSON to populate store and then use it in a grid.

//-----Record----------------------

var PropertyRecord = Ext.data.Record.create([{
name: 'Name',
mapping: 'properties.propertyName'
},
{
name: 'Value',
mapping: 'properties.stringValue'
},
//{properties: 'properties'},
{
id: 'id'
},
{
name: 'propertySetName'
},
{
name: 'propertySetDisplayName'
}]);

//-----Store----------------------
ui.properties.createStore = function () {
var reader = new Ext.data.JsonReader({
root: 'data',
totalProperty: 'total'
//data: []
}, PropertyRecord);
return new Ext.data.Store({
reader: reader,
url: ui.properties._propertyUrl,
autoLoad: true
});
/*return new Ext.data.GroupingStore({
reader: reader,
url : ui.properties._propertyUrl,
autoLoad : true,
groupField : 'propertySetName',
//groupRenderer : function (v) {return v;}
});*/

//-----Grid----------------------
propGrid = new Ext.grid.GridPanel({
xtype: 'grid',
title: 'Properties',
id: 'prop_grid',
loadMask: true,
height: 235,
store: ui.properties.createStore(),
columns: [{
id: 'colpropName',
header: 'Name',
sortable: false,
dataIndex: 'Name'
},
{
id: 'colpropValue',
header: 'Value',
sortable: false,
dataIndex: 'Value'
},
{
id: 'colpropID',
header: 'ID',
sortable: false,
dataIndex: 'id'
},
{
id: 'colpropType',
header: 'Name',
sortable: false,
dataIndex: 'propertySetName'
}],
/*view : new Ext.grid.GroupingView({
forceFit : true,
emptyText: 'none',
enableGroupingMenu: false,
hideGroupedColumn: true,
startCollapsed: true,
showGroupName: true
}),*/
view: Ext.grid.GridView({
autoFill: true,
forceFit: true
}),
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});

Thanks,
Karthik

Condor
7 Jan 2011, 3:41 AM
A GroupingStore needs flat data, so you will need to write a root method for your JsonReader that returns flat data, e.g.

var reader = new Ext.data.JsonReader({
root: function(json) {
var root = [];
for (var i = 0; i < json.data.length; i++) {
var propertySet = json.data[i];
for (var j = 0; j < propertySet.properties.length; j++) {
var property = propertySet.properties[j];
root.push(Ext.apply({
propertySetId: propertySet.id,
propertySetName: propertySet.propertySetName,
propertySetDisplayName: propertySet.propertySetDisplayName
}, property));
}
}
return root;
},
fields: [
'propertySetId',
'propertySetName',
'propertySetDisplayName',
'id',
'propertyName',
'stringValue'
]
});

karthik_br
8 Jan 2011, 10:45 PM
Thank you for the information!! I spent a lot of time on this. I changed the webservice json to send flat data to avoid the client side post processing.