View Full Version : How do you create table columns and fields from json? (Dynamic Grid)

11 Jun 2012, 2:09 AM
I have a json file and I assume that I do not know anyting about the content. I do not know the model. However it is given in the json file the model, the data, and other information about the grid. How I'll create the columns etc in this way?

11 Jun 2012, 2:34 AM
Maybe can use AJAX request. AJAX request can callback a JSON object, then you can use a function to get the items. such as the form submit,

failure : function(form, action){

if the submit failure, it will call failure function. the callback JSON is like:

{success : false
errors: {
info : 'insert failure'

you can also save the info(or other items like model) to a variable.

11 Jun 2012, 4:39 AM
Something like this:

// data = [[cell11, cell12, ... ], [cell21, cell22, ...] ...];
// grid - grid panel instance
var fields = [], cols = [], i, store;

i = 0;
Ext.Array.forEach(data[0], function (cell) {
name: 'field_' + i
// ,type: 'string'
header: 'Col ' + i,
dataIndex: 'field_' + i

store = Ext.create('Ext.data.ArrayStore', {
fields: fields,
data: data

grid.reconfigure(store, cols);

11 Jun 2012, 4:42 AM
You might need to start by generating the fields/model for the data store that will power the grid. You can then get a record/model from the store, and build the columns for the grid off the fields in the record/model. I started playing around with a store that would try and generate it's field list in the constructor if one wasn't provided. It's not tested but might get you going in a useful direction. You would need to use this instead of the default Ext.data.Store, but you could do the same process in your main method before building the store/grid if you wanted like redraid suggests above. Good luck!

Ext.define('Ext.ux.data.Store', {
extend: 'Ext.data.Store',

constructor: function(config) {
//Store a reference to the parent constructor for use in the callback

url: config.proxy.url || config.proxy.api.read,
params: config.proxy.params || undefined,
extraParams: config.proxy.extraParams || undefined,
scope: this,
success: function (response, opts) {
//Parse response
response = Ext.JSON.decode(response.responseText);
var records = response.data;

//Check for field or model definition - create fields if needed
if (typeof config.model === 'undefined' && typeof config.fields === 'undefined') {
// Get first record - may have to loop through
// all records with inconsistent data
var record = response.data[0];

//Build the fields config
config.fields = [];
for (key in record) {

//Call default constructor

//Load the data
if (config.autoLoad === true) {

//Check if it worked
console.log(this, this.getAt(0));
failure: function() {/*handle errors*/}