PDA

View Full Version : Need help in populating the grid columns



ragendu
2 Mar 2012, 2:56 AM
I want to populate grid columns from the database. On click of submit button, it needs to contact database and then populate the grid column. What I have written in my code is on the button handler I called a function. This function has the datastore which contacts the db and has a reader also. But the gird is not getting the values. Please guideme on this.

handler : function(){
loadJobs();
}

function loadJobs(){
var listStore= new Ext.data.Store({
url : "/list.cfc",
method : 'POST',
reader : listReader,
baseParams : {
method : 'fetchList',
returnFormat : 'json',
owner : 'ALL',
status : 'ALL',
jobidSearch : '',
jobid : ''
},
listeners : {
beforeload : function(store,options){
store.baseParams.email = Ext.getCmp('Combo1').getValue();
store.baseParams.status = Ext.getCmp('Combo2').getValue();
store.baseParams.idSearch =Ext.getCmp('searchText').getValue();
}
}
});
var listReader = new Ext.data.CFQueryReader(
{
id : 'jobid',
totalProperty : 'TOTALROWCOUNT'
},
[
{ name : 'jobid',mapping : 'JOBID',type : 'string'},
{ name : 'description',mapping : 'DESCRIPTION',type : 'string'},
{ name : 'category',mapping : 'CATEGORY',type :'string'}
]
);
}


var filterGrid = new Ext.grid.GridPanel({
title : 'List',
id : 'list',
store : listStore,


columns: [
{
header : 'JOBID',
width : 70,
dataIndex : 'jobid',
sortable : true
},
{
header : 'Description',
id : 'description',
dataIndex : 'description',
},
{
header : 'Category',
dataIndex : 'category',
width : 100
}
]
});

vietits
2 Mar 2012, 4:27 AM
See my comments in your code ( in red color).


handler : function(){
loadJobs();
}


function loadJobs(){
// listStore is local variable that exists in the scope of loadJobs() only.
// listStore will be created each time loadJobs is called and will be destroyed on exiting loadJobs()
var listStore= new Ext.data.Store({
url : "/list.cfc",
method : 'POST',
reader : listReader, <- listReader is undefined
baseParams : {
method : 'fetchList',
returnFormat : 'json',
owner : 'ALL',
status : 'ALL',
jobidSearch : '',
jobid : ''
},
listeners : {
beforeload : function(store,options){
store.baseParams.email = Ext.getCmp('Combo1').getValue();
store.baseParams.status = Ext.getCmp('Combo2').getValue();
store.baseParams.idSearch =Ext.getCmp('searchText').getValue();
}
}
});
var listReader = new Ext.data.CFQueryReader( <- this should appear before creating store
{
id : 'jobid',
totalProperty : 'TOTALROWCOUNT'
},
[
{ name : 'jobid',mapping : 'JOBID',type : 'string'},
{ name : 'description',mapping : 'DESCRIPTION',type : 'string'},
{ name : 'category',mapping : 'CATEGORY',type :'string'}
]
);
}

var filterGrid = new Ext.grid.GridPanel({
title : 'List',
id : 'list',
store : listStore, <- listStore is undefined

ragendu
2 Mar 2012, 4:45 AM
Thanks for your comments. I understood my mistakes. I have one more query. When the window is opened, there should not be any values in the grid. Only when i click submit, the grid should be populated. But now what is happening is the grid is populated with values when the window is itself. Can you tell me what I have to make the grid values to be null when the page is opened?
Thanks in advance...

vietits
2 Mar 2012, 4:54 AM
You can achieve what you said by some ways:
1. Create grid with no store or store set to null. When button is clicked, you create store, load data and bind it with your grid by using <grid>.reconfigure(<store>);
2. Create your grid with store that is configured autoLoad set to false. When button is clicked, call <store>.load() to load data from server.

ragendu
2 Mar 2012, 10:19 PM
hey thanks.. i was able to make it work :)
Thanks a lot for helping me out in this...