PDA

View Full Version : Making a model according to the incoming JSON data



harman
10 Jul 2012, 2:54 AM
HI,

I have a unique requirement where i need to create a grid as per the incommin JSON data from the server side.
I need to create columns in grid corresponding to the number of fields in json.
Till here it is solvable but the main problem is that i do not know what fields and how many fields would be coming in.

Cant we create a Model dynamically according to the data coming?

Thanks in advance

sdt6585
10 Jul 2012, 3:47 AM
I started working on something similar, but just using the fields config of a store to build the model. Never got around to testing it since the requirements changed but hopefully it will give you a useful starting point.



// Extend the base store class to autoload on construction
// and create the fields/model definition if not defined
Ext.define('Ext.ux.data.Store', {
extend: 'Ext.data.Store',


constructor: function(config) {
this.callParent();


Ext.Ajax.request({
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) {
config.fields.push(key);
}
}


//Call default constructor
this.callParentConstructor(arguments);


//Load the data
if (config.autoLoad === true) {
this.loadData(records);
}


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

Farish
10 Jul 2012, 4:01 AM
You can send an AJAX request to read the model parameters (e.g. store fields and their types):


Ext.Ajax.request({
url: '.....ReadModel',
success: function(response) {
var text = response.responseText;
var decodedText = Ext.decode(text);
create_grid_and_store(decodedText);
}
});

and then create the grid and store:


function create_grid_and_store(data)
{
columns = data.columns;

storeFields = [];
gridColumns = [];

for(var i=0; i<columns.length; i++)
{
var idx = storeFields.length; // you may use i as index if the store fields and grid columns are all same

var columnName = columns[i].columnName;
var storeField = columns[i].storeFieldName;

storeFields[idx] = {};
storeFields[idx].name = storeField;
storeFields[idx].type = 'text';

gridColumns[idx] = {};
gridColumns[idx].text = columnName;
gridColumns[idx].width = 100;
gridColumns[idx].dataIndex = storeField;
gridColumns[idx].menuDisabled = true;
}

store_result = new Ext.data.Store({
fields: storeFields,
data: [],
autoLoad: false,
pageSize: 24, buffered: false, purgePageCount: 0 // for paging, if you dont need paging, you may remove this line.
});

grid_result = lastGrid = Ext.create('Ext.grid.Panel', {
enableColumnMove: false,
store: store_result,
columns: gridColumns,
autoScroll: true,
height: 650,
bbar: Ext.create('Ext.PagingToolbar', {
store: store_result,
displayInfo: true,
displayMsg: ' {0} - {1} of{2}'
})
});
panel_result.add(grid_result);
}

This would need a JSON string formatted like:



{ "columns": [{"columnName":"Hello", "storeFieldName":"Hello"},{"columnName":"World", "storeFieldName":"World"} ] }


you may use the same field for store field name as for the grid column name. You may also add a field type to specify the type of field for the model e.g. int or string.

Ex_Soft
10 Jul 2012, 4:09 AM
Ext.onReady(function() {
var
store = Ext.create("Ext.data.Store", {
fields: []
}),
data = {
success : true,
total: 1,
rows: [{
id: 1,
name: "Record# 1"
}],
metaData: {
root: "rows",
idProperty: "id",
fields: [
{ name: "id", type: "int" },
"name"
]
}
};

store.loadRawData(data, false);
});

?