Dynamic grid from JSON data

[flavor8]

I have a webapp which returns a JSON dataset. The headings are in the dataset as row 1, and I don't have a datatype definition either client or server side.

In the example for array-grid, the columns model is set up as follows. Is there a way to do this without telling the reader what it can expect, and without telling the column model the names of the columns, but still maintaining the ability to sort? At the moment I'm using a more primitive jQuery plugin as my grid, which is fine, but I have to render a table in the DOM before I can activate the plugin, which is a little ugly.


var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);


http://extjs.com/deploy/dev/examples/grid/array-grid.js

[flavor8]

bump