stahl.stalin
17 Sep 2012, 3:41 AM
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?
{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?