Dynamic Grid in EXTJS using JAVA(Spring)

[stahl.stalin]

1)I tried to create a dynamic grid using EXTJS. I am able to return the data in below format from java server side controller to EXTJS Store using ajax call.


{columns: [{"columnName":"column1", "storeFieldName":"field1"}, {"columnName":"column2", "storeFieldName":"field2"}, {"columnName":"column3", "storeFieldName":"field3"}]

The piece of code used for achieving this is::




grid = '';
text= '';
convertedObject='';
Ext.Ajax.request({
// url: contextPath + '/prefmyRequest.html',
url: contextPath + '/cop/1/dynamicHeader/list.view',

method : 'GET',
//type : 'json',
//headers: { 'Content-Type': 'application/json' },
success: function(response) {
text = response.responseText;
Ext.Msg.alert(response.responseText);


console.log("TEXT>>>>>"+text);
convertedObject = eval('('+text+')');
console.log("convertedObject>>>>>"+convertedObject);
create_grid_and_store(convertedObject);
}
});



function create_grid_and_store(convertedObject)
{
alert("inside create_grid_and_store");
alert("convertedObject"+ convertedObject);
columns = convertedObject.columns;


storeFields = [];
gridColumns = [];


alert(columns.length);
for(var i=0; i<columns.length; i++)
{
var columnName = columns[i].columnName;
var storeField = columns[i].storeFieldName;


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


gridColumns[i] = {};
gridColumns[i].text = columnName;
gridColumns[i].flex = 1;
//gridColumns[i].width = 200;
gridColumns[i].dataIndex = storeField;
}


store = new Ext.data.Store({
fields: storeFields,
data: [],
autoLoad: false
});

grid = Ext.create('Ext.grid.Panel', {
enableColumnMove: false,
store: store,
columns: gridColumns,
autoScroll: true,
height: 650
});
}
I am not sure ,my response text is coming in JSON/String format.
Hence I used eval( convertedObject = eval('('+text+')'); ) and passed the value .




But Finally I am getting error like

TypeError: 'undefined' is not an object (evaluating 'item.floating')



TypeError: 'undefined' is not an object (evaluating 'columns.length')


Can anyone suggest how to implement Dynamic Grid?



2)we need to create a dynamic grid(headers). So , from controller need to pass two json objects ; one is for header and one is for data. Can you please let us know if we can send two different format jsons to UI or any other way of doing this?

[scottmartin]

Have a look at:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.JSON-method-decode

Scott.

[stahl.stalin]

I am able to get the dynamic headers using dynamic models as shown here in above code.
But how to get the records for the GRID dynamically at the same time along with dynamic models.