PDA

View Full Version : Display 'no records' in the grid's body



papasi
31 May 2007, 2:30 PM
I've searched the forum but nothing turned up. Maybe I typed in the wrong terms.

I think this is already supported but I can't find the relevant info in the api doc.

(BTW, the doc http://extjs.com/deploy/ext/docs/output/Ext.grid.Grid.html is messed up, scroll to the bottom and you see the if the a an config options...)

I've seen this implemented in BernardChhun's nice real estate site http://go.waka.ca/

Basically when there's no rows to display in the grid, the grid view body shows

There's no results for your search criteria.
Change your criteria <- a href link

There should be a built-in mechanism to do that, right?

Thanks.

BernardChhun
31 May 2007, 2:53 PM
it was a hack man! :)

seriously here it is :


loadFunction = function() {
if(this.grid.dataSource.getCount() == 0){
this.grid.view.mainBody.update("<div style='height:75px; font:11px arial, helvetica;padding:20px;'>"+ _("no-search") +"</div>");
}else{
this.grid.selModel.selectFirstRow();
}
this.clear();
this.pageCursor = this.currentPage();
}
dataStore.on("load", loadFunction , this, true);


it's basically a load handler that checks the number of data in the dataStore.

if its equal to 0, we just write some html into the GridView's body.

papasi
31 May 2007, 3:43 PM
works great! many thx.

(i guess putting your name in the thread title was very effective ;) )

dragontree
15 Jun 2007, 7:44 AM
it was a hack man! :)

seriously here it is :


loadFunction = function() {
if(this.grid.dataSource.getCount() == 0){
this.grid.view.mainBody.update("<div style='height:75px; font:11px arial, helvetica;padding:20px;'>"+ _("no-search") +"</div>");
}else{
this.grid.selModel.selectFirstRow();
}
this.clear();
this.pageCursor = this.currentPage();
}
dataStore.on("load", loadFunction , this, true);


it's basically a load handler that checks the number of data in the dataStore.

if its equal to 0, we just write some html into the GridView's body.

Thanks! I also was looking for a solution to this problem.

peter.riche
11 Feb 2008, 11:02 PM
in your gridPanel, just use this config options :

autoHeight: true,
viewConfig: {
emptyText: '<div align="center">Please drop me something to eat...</div>'
}
the only "trick" is that you have to refresh the gridView after it has been shown :

Ext.getCmp('myGridId').getView().refresh();

It's kind of easier...