thecfguy

A Unique Developer

Showing record information in CFGRID footer in ColdFusion 9

I was working on migration from ColdFusion 8 to ColdFusion 9 for one my client. As I have raised in my other post that Coldfusion 9 is using Ext 3.0 which required some javascript changes if you have used ExtJs function to extend your functionality. 

I need to show record information (ex. Showing 1 to 10 out of 15) in CFGRID footer but as usual I require to make changes as per ExtJs version 3.0.

Below is code snippet to show record information in footer.[googlead]single_line[/googlead]

<html><head><script  type="text/javascript">var gridRender = function(){    grid = ColdFusion.Grid.getGridObject('artGrid');   //Get grid object    //overwrite existing grid footer with new div, Ext.id() will assign unique id to footer    var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);    //Create new PaginToolbar and render it to bbar (grid footer)    gbbar = new Ext.PagingToolbar({       renderTo:bbar,       store: grid.store,         pageSize: 10,        displayInfo: true,        displayMsg: '<b>Showing {0} - {1} out of {2}</b>',        emptyMsg: "<b>No Record</b>"    });};</script></head><body><cfform><cfgrid format="html" name="artGrid" pagesize="10" selectmode="row"bind="cfc:test.art.getArtists({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"><cfgridcolumn name="ARTISTID" display="No"/><cfgridcolumn name="FIRSTNAME" header="FIRSTNAME" ><cfgridcolumn name="LASTNAME" header="LASTNAME" ><cfgridcolumn name="CITY" header="CITY" ><cfgridcolumn name="STATE" header="STATE" ></cfgrid></cfform><cfset ajaxOnLoad("gridRender")></body></html>

Call gridRender function using ajaxOnLoad to modify existing grid footer.   
var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
Above statement will remove existing grid footer with blank div. 

[googlead]single_line[/googlead]

gbbar = new Ext.PagingToolbar({
renderTo:bbar,
store: grid.store, 
       pageSize: 10,
       displayInfo: true,
       displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
       emptyMsg: "<b>No Record</b>"
   });

Now create new Paging toolbar using Ext.PaginToolbar class and set displayinfo to true and in displayMsg will use to display record information on grid. 
numbers will be replaced with record information.
{0} : record number for first record on page.
{1} : record number for last record on page.
{2} : total number of records.
And here is output. Sorry guys I cann't show you live examples as current host provide coldfusion 8, but Click here to download code.

 

CFGRID with record information