PDA

View Full Version : Displaying data in Ext.grid.GridPanel



thejavafreak
6 May 2009, 9:25 PM
Dear all,

I'm having difficulties to parse a JSON data in a grid that as a format like this:

[ {"product": {"name": "test"} ]

It seems that the 'field' property in Ext.data.JsonStore only accepts this kind of format:

"products": [ {"name":"test"} ]

I can not change the JSON data format because I just retrieve it from another party.

Can anybody give me a hint on how to make this data available the Ext.grid.GridPanel ?

Thank you very much for your assistance.

evant
6 May 2009, 9:31 PM
You could intercept the data as it comes in and modify it to inject your own root property.

thejavafreak
6 May 2009, 9:57 PM
So the grid only accepts the first format? :-(

evant
6 May 2009, 10:27 PM
It has nothing to do with the grid, it's the store, specifically the reader of the store that it's backed by. You'll notice there are several readers, JsonReader, XmlReader, ArrayReader. You could easily write your own customized reader.

For example, here's one I wrote to do CSV:



Ext.ux.CsvReader = Ext.extend(Ext.data.DataReader, {
newline: '\r\n',
seperator: ',',

readRecords : function(o){
this.csvData = o;
var s = this.meta;
var sid = s ? (s.idIndex || s.id) : null;
var recordType = this.recordType, fields = recordType.prototype.fields;
var records = [];

var data = o.split(this.newline);
Ext.each(data, function(row){
var values = {};
row = row.split(this.seperator);
var id = ((sid || sid === 0) && !Ext.isEmpty(row[sid]) ? row[sid] : null);
Ext.each(row, function(item, idx){
var f = fields.items[idx];
var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : idx;
var v = row[k] !== undefined ? row[k] : f.defaultValue;
v = f.convert(v, idx);
values[f.name] = v;
});
records.push(new recordType(values, id));
}, this);

return {
records : records,
totalRecords : records.length
};
}
});

Ext.onReady(function() {
var s = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(),
reader: new Ext.ux.CsvReader({
id: 0
}, ['id', 'fname', 'lname'])
});
var data = ['1,Evan,Trimboli','2,Aaron,Conran'];
s.loadData(data.join('\r\n'));
var rec = s.getAt(0);
console.log(rec.id);
console.log(s.getAt(0).get('fname'));
});