This morning, Paul Stewart submitted an interesting question to the CF-Talk List:

"Hi, I have been using the CFgrid tag in CF8 (format HTML, bound to a cfc), and i have got it do almost all that i need it do (see below). Except that i don't know how to get access to the TOTALROWCOUNT figure that i can see in the debugger returned from the CFC , and also be able to display that figure either on the bottom of the grid itself (using ext.toolbar???), or even above it on the page using another ajax method??.

I need to do this show the user amount of records returned from his/her search. i.e 'your search returned x number of records.' From reading Ray Camden's blog I know i have to use the underlying Ext library that the cfgrid tag is based on, and i have used his solution to format some columns in the grid (nice one Ray). But i am not really getting anywhere (hopelessly bamboozled) with the records returned figure...."

This is a great question! And so easy to implement using the underlying ExtJS 1.1.1 component architecture of the ColdFusion 8 Ajax controls. The grid component already knows what the beginning and ending rows are for the page, and the total number of rows, so it's just a matter of getting them to display on the PagingToolbar. Paul had included a little code in his post, the primary piece of which (as far as we're concerned) is his formatgrid() function:

view plain print about
1formatgrid = function() {
2 mygrid = ColdFusion.Grid.getGridObject('ad');
3
4 cm = mygrid.getColumnModel();
5 cm.setRenderer(3,myf);
6 cm.setRenderer(5,myf);
7
8 mygrid.reconfigure(mygrid.getDataSource(),cm);
9}

Basically he has most of the pieces that he needs already. He needs a reference to his data.Store object, which we'll add right after he gets his grid instance:

view plain print about
1...
2    mygrid = ColdFusion.Grid.getGridObject('ad');
3    ds = mygrid.getDataSource();
4    ...

Then, after his renderers, but before his reconfigure(), we'll get a reference to his grid's FooterPanel to redefine the PagingToolbar:

view plain print about
1...
2    cm.setRenderer(5,myf);
3    // Get the Footer
4
5    var gridFoot = mygrid.getView().getFooterPanel(true);
6    // Create a new Paging Toolbar
7
8    var paging = new Ext.PagingToolbar(gridFoot,ds,{
9        pageSize:25, //number of records displayed in grid
10
11        displayInfo:true,
12        displayMsg:'Displaying records {0} - {1} of {2}',
13        emptyMsg:"No records to display"
14    });
15    
16    // reconfigure the grid
17
18    mygrid.reconfigure(ds,cm);
19    ...

Hey! Reload the page and what do you get? An adjusted toolbar, giving Paul exactly what he was looking for, the current record from - to and the total number of records returned. Though I've used this before, I wanted to note that this code is almost an exact copy of the example code included in the ExtJs 1.1.1 API documentation. There is a ton of untapped potential within the underlying Ext framework. With a little research you may be surprised what you can accomplish.

This entry was posted on January 16, 2008 at 3:14 PM and has received 7064 views. There are currently 15 comments. Print this entry.