PDA

View Full Version : GridPanel: How to Handle Null/Empty DataStore



rehanazher
6 Aug 2009, 6:01 AM
Hi All,

I have a GridPanel showing db data based on user selection i.e. GridPanel is bind to another ListView.

if store contains at least one record, GridPanel refresh automatically using:


myGrid.store.reload();
myGrid.getView().refresh();
but it wont refresh its UI if the store empty/nul i.e. no record found matching user selection.

Below is my code:
DataStore:

var dsCodByid = new Ext.data.Store({
autoDestroy: true,
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'customerID',
},[
'cdName',
'cdEmail',
'cdPhone',
'cdCell'
]),
proxy: new Ext.data.HttpProxy({
url: 'include/getCodById.php'
})
});
GridPanel:


var grid = new Ext.grid.GridPanel({
frame:true,
title: 'Contact Details',
height:170,
collapsible:true,
margins: '0 0 10 0',
layout: 'fit',
store: dsCodByid,
stripeRows: true,
animCollapse: true,
columnLines: true,
columns: [
{header: 'Contact Name', dataIndex: 'cdName', width: 250},
{header: 'Email Address', dataIndex: 'cdEmail', width: 250},
{header: 'Office Phone', dataIndex: 'cdPhone', width: 250},
{header: 'Cell Phone', dataIndex: 'cdCell', width: 250},
]
});Store Reload/Grid Refres Code:


grid.store.reload({params:{id1: rId}});
grid.getView().refresh();rId is a variable here.


how to do????

tryanDLS
6 Aug 2009, 6:08 AM
You don't need to call refresh after load/reload. I would suggest adding handlers for store's load/exception events to see what's happening. My guess would be that you are returning an invalid response in the case when no rows are found.

http://extjs.com/learn/Ext_FAQ_Grid

rehanazher
6 Aug 2009, 6:35 AM
Thanks Tim,

yep I was return null instead of empty array (rows:{[]}--------worked for me).

I checked the faqs there are two solutions mentioned one is returning Empty Array other is below:


dataStore.on('load', function() {
var el = grid.getGridEl();
if (dataStore.getTotalCount() == 0 && typeof el == 'object') {
el.mask('No Data', 'x-mask');
}
});this adds a gray mask (I love the idea) on the grid if there is no record , now how to remove this mask.

It may be easy, sorry but I am a beginner.

Thanks

rehanazher
6 Aug 2009, 6:47 AM
thanks i got it.


dataStore.on('load', function() {
var el = grid.getGridEl();
if (dataStore.getTotalCount() == 0 && typeof el == 'object') {
el.mask('No Data', 'x-mask');
}else{
el.unmask();
}
});