Show No results in the grid if store returns none

[newedge]

Just wanted to post this little bit of code we did recently. I couldn't find a way to have our grid return a nice message stating that no records were found.

You will need to add a class x-grid3-body-empty with something like


.x-grid3-body-empty{
height:30px;
margin-top:10px;
font-size:12px;
text-align:center;
color:#888888;
}


And then just extend the grid to something like this. Notice you can customize what you want the message to be using emptyMsg when configuring your grid.



ExtendedGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
ExtendedGrid.superclass.initComponent.call(this);
},
emptyMsg:"There are no records available",
onRender: function (g) {
ExtendedGrid.superclass.onRender.call(this,g);

this.store.addListener("load",function(store,records,options){
//returns the element for x-grid3-body for the current grid
//ensures safe for multiple grids per page
el = Ext.query(".x-grid3-body",this.body.id)[0];
if(records.length==0){
el.innerHTML = this.emptyMsg;
el.className = "x-grid3-body x-grid3-body-empty";
}else{
el.className = "x-grid3-body";
}
},this);

}
});


Please let us know if you guys have a better way or better yet if the grid will do this when store returns no records and we just missed it.

[dlbjr]

//Place This in global area to use on all grids
var Config = {
blank_image_url: 'resources/images/default/s.gif',
load_mask: 'loading data. Please be patient...',
grid_no_data: '<br/><br/><center><div class="no_data">No data available...</div></center>'
};

//Here is a simple grid using the config items
var g = new Ext.grid.GridPanel({
loadMask: { msg: Config.load_mask, store: ds },
viewConfig: { emptyText: Config.grid_no_data },
store: ds,
height: 400,
width: 400,
stripeRows: true,
autoScroll: true,
clicksToEdit: 1,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{
header: 'id',
dataIndex: 'id',
hideable: true,
sortable: true,
hidden: true
}, {
header: 'data',
dataIndex: 'data',
hideable: true,
sortable: true,
hidden: false,
width: 400
}
])
});

[Animal]

http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.GridView&member=emptyText ?

[newedge]

Thanks Animal. That is what I get for still having the docs for 2.2 :S