PDA

View Full Version : JSONStore and multidimensional response



aaronbartell
19 Jul 2010, 11:36 AM
I was curious to know how others have processed multidimensional JSON responses from the server.

I currently have the following JSON response:



{
"PERSON_LIST": [
{
"PERNBR": 54 ,
"NAMLAST": "Bartell" ,
"NAMFIRST": "Aaron" ,
"DOB": "1979-06-26" ,
"AGE": "31" ,
"CODE_LIST": [
{"CODE","B"},
{"CODE","B"} ]
},
{
"PERNBR": 99 ,
"NAMLAST": "Johnson" ,
"NAMFIRST": "Larry" ,
"DOB": "1959-05-26" ,
"AGE": "41" ,
"CODE_LIST": [
{"CODE","B"},
{"CODE","T"}
]
}
]
}

Which is obtained with this JsonStore:


var gp2AStore =
new Ext.data.JsonStore({
autoLoad: false,
proxy: new Ext.data.HttpProxy({url:/rpgui/list,method:'POST'}),
baseParams: {action: 'LOAD_PERSON'},
root: 'PERSON_LIST',
fields: ['PERNBR','NAMLAST','NAMFIRST','DOB','AGE', ???CODE_LIST???]
});

...with hopes of loading it into this GridPanel where the CODE_LIST would have all of the CODE entries specified in that cell with vertical bars (i.e. | ) as the delimiter.


gp2A = new Ext.grid.GridPanel({
store: gp2AStore,
columns: [
{header: dataIndex: 'PERNBR'},
{header: dataIndex: 'NAMLST'},
{header: dataIndex: 'NAMFIRST'},
{header: dataIndex: 'DOB'},
{header: dataIndex: 'AGE'},
{header: dataIndex: 'CODE_LIST????'}
]
});

I get the feeling this might require a lower level collection of ExtJS API calls vs. using the higher level JsonStore, but thought I would ask just in case I am missing something - especially since I have to imagine complex data types aren't that uncommon. Or, is it possible to do a GridPanel within a GridPanel?

AaronBartell.com
www.SoftwareSavesLives.com

BitPoet
20 Jul 2010, 12:39 PM
You can use "CODE_LIST" in your store's field definitions and in your column's dataIndex right away. The only thing you have to add is a renderer (http://www.sencha.com/deploy/dev/docs/?class=Ext.grid.Column#Ext.grid.Column-renderer) for your column, something like:


function rendercode(v) {
var f = [];
for( var i = 0, l = v.length; i < l; i++ ) {
f.push(v[i]["CODE"]);
}
return f.join('|');
}