PDA

View Full Version : Problem in displaying database data into Grid using Ajax request



FunnyBunny
13 May 2012, 11:18 PM
Hello,
I am doing an app which displays database table data into grid based on Combo box selection. So on select event of combo, I want to create a grid. Grid needs to be displayed with pagination.
For sake of pagination & database I need to send request for data through Ajax. But problem is, as Ajax requests are being asynchronous in nature,I'm not being able to return newly created grid. How can I get all the data before grid is being created?
I am new to ExtJS. Please help :). Here is what I'm doing(which is I know absolutely wrong) -->

var form1 = new Ext.FormPanel({
renderTo : document.body,
id : 'form12',
frame : true,
title : 'Grids Demo',
width : 500,
height : 700,
items :
[
{
xtype : 'combo',
name : 'tablename',
fieldLabel : 'Select one table',
mode : 'local',
store : tables,
displayField : 'tablename',
width : 200,
listeners : {
select : function(f, r, i) {
var tb = f.getValue();
if (f.getValue() == 'Select Table') {
Ext.Msg.alert('Message', 'Select any table.');
}
if (f.getValue() == 'TEST1') {
Ext.Msg.alert('Hi','You have selected '+ f.getValue());
var grid = createGrid(tb);

}
if (f.getValue() == 'TEST2') {
Ext.Msg.alert('Hi','You have selected '+ f.getValue());
var grid = createGrid(f.getValue());
}
}
}
},
{
xtype : 'panel',
id : 'panel1',
width : 400,
height : 400,
bodyBorder : true,
border : true

}
]

});

function createGrid(tablename)
{
var grid;
Ext.Ajax.request({

url : 'getColumns.action',
params : {
tablename : tablename
},
success: function( response, options )
{
temp = Ext.decode(response.responseText);
respCol = temp.col; /*this I'm getting from response by server, where respCol : Column names
respHdr : header with index obj & respData : table data rowwise*/
respHdr = temp.hdr;
respData = temp.dt;
maxPageSize = 5;

var arrStore = new Ext.data.ArrayStore({
data : respData,
storeId : 'arrStore',
root:'col',
fields:respCol,
totalProperty:'tp',
autoLoad : true

});

var colModel = new Ext.grid.ColumnModel({
defaults:
{
sortable:false,
menuDisabled:true
},
columns:respHdr
});

var paging = new Ext.PagingToolbar({
store:arrStore,
pageSize:maxPageSize,
displayInfo:true
});

Ext.StoreMgr.get('arrStore').load({
params:{
start:0,
limit:maxPageSize
}
});


grid = new Ext.grid.GridPanel({
id:'grid1',
store:arrStore,
colModel: colModel,
renderTo:document.body,
frame:true,
height:250,
stripeRows: true,
bbar:paging
});

Ext.getCmp('panel1').removeAll();
Ext.getCmp('panel1').doLayout();
Ext.getCmp('panel1').add(grid);
Ext.getCmp('panel1').doLayout();

}

});

return grid;
}
});


The response as JSON file I'm getting is as follows, which is I guess correct-->

{success:true,col:["NAME","AGE","ID","CONTACT_NO"],hdr:[{"dataIndex":"NAME","header":"NAME"},{"dataIndex":"AGE","header":"AGE"},{"dataIndex":"ID","header":"ID"},{"dataIndex":"CONTACT_NO","header":"CONTACT_NO"}],dt:[["Gauri","22","34","455665"],["Neetika","24","45","335555"],["Pooja","23","54","333222"],["Anjali","34","22","123432"],["Ashok","32","33","122233"]]}
The logic I've applied at java side for getting columns and data is working fine for one table. So problem is in sending request at front end.

Thanks in advance :):):)

Regards,
FB

scottmartin
14 May 2012, 6:31 AM
As you mention, your timing is off.

I would suggest creating the grid and then calling your ajax.
Upon success, you can reconfigure the grid.

Regards,
Scott.

FunnyBunny
15 May 2012, 10:28 PM
Thanks for reply :)

Can you give me any simple example for this procedure,like creating grid first and then reconfiguring it?
Reconfiguration needs to change store, columnmodel, selection model, right?

Regards,
FB

scottmartin
16 May 2012, 5:32 AM
The grid reconfigure accepts store,cm as parameters.




// define grid
var grid = new Ext.grid.GridPanel({
..
});

Ext.Ajax.request({
..
success: function( response, options ) {
grid.reconfigure(store,cm);
}
});



Scott.