CF8 Ajax Grid: Showing the TotalRecordCount
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:
mygrid = ColdFusion.Grid.getGridObject('ad');
cm = mygrid.getColumnModel();
cm.setRenderer(3,myf);
cm.setRenderer(5,myf);
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
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:
mygrid = ColdFusion.Grid.getGridObject('ad');
ds = mygrid.getDataSource();
...
Then, after his renderers, but before his reconfigure(), we'll get a reference to his grid's FooterPanel to redefine the PagingToolbar:
cm.setRenderer(5,myf);
// Get the Footer
var gridFoot = mygrid.getView().getFooterPanel(true);
// Create a new Paging Toolbar
var paging = new Ext.PagingToolbar(gridFoot,ds,{
pageSize:25, //number of records displayed in grid
displayInfo:true,
displayMsg:'Displaying records {0} - {1} of {2}',
emptyMsg:"No records to display"
});
// reconfigure the grid
mygrid.reconfigure(ds,cm);
...
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.
I have a coumn that only display edit icon with js script to bring up data edit cfwindow screen which doesn't need sorting capability.
Have you tried disabling sorting onclick event for specific column in cfgird?
thanks in advance.
grid.getDataSource().totalLength
Yes, it's easy to work with the area above the column headings, which Ext calls the HeaderPanel, which is just a basic panel. To access it you go through the grid's 'view', which is the GridView object. Works like this: hPanel = grid.getView().getHeaderPanel(). After that you just place what you need into the HeaderPanel.
The Ext 1.1 documentation is still available in the 'Learning Center' under 'Support' on the Ext site. It provides dozens of great examples with full code, and the API documentation.
var gridHead = gridobj.getView().getHeaderPanel(true);
var headerobj = new Ext.Toolbar(gridHead);
headerobj.add(new Ext.Toolbar.TextItem('<strong>Insurance History</strong>'));
It is a lot to take in, and sometimes requires a significant amount of digging.
There are a few things you have to understand when working with Ext. Basically, each component is a container of components, creating deep nestings of div elements. Franks code gets the 'View' object of the grid, then gets the header 'Panel' of that 'View', and then puts a 'Toolbar' into the 'Panel', finally placing a 'TextItem' into the 'Toolbar'.
Confused yet? So was I. I had to spend a lot of time looking over the sample code of all of the demos, cross referencing calls made to the API documentation, as well as doing a lot of experimenting.
The 'Panel' element, which is the core of so many components in Ext, is basically a box (div) with properties and methods. Frank placed a 'Toolbar' there, but you could just as easily applied basic html to it's 'body' property, almost like working with cfpod or cfwindow (which also use 'Panel' as the core area.)
I hope this helps out. If you have any questions, feel free to ask and I'll see what I can do to help you through the learning curve. There is also a very active Forum on the Ext site, which still has specific topic categories for working with Ext 1.1.
I just wanted to say thanks for your blog postings. they have been
extremely helpful in learning extjs. (Just bought your book and got
it in last night).
I am currently struggling with something that I just cannot seem to
figure out and I am not even sure if it is possible. I have a cf8 generated
cfgrid that is bound to a cfc. I would like to "freeze" the first couple
of columns so that when the user scrolls to the right of the grid, they
can still see the first copule of columns. (Like the excel freeze window/pane
feature). Short of re-writing my grid in pure extjs, is there something
that I can do to accomplish this?
Thanks for your comments, and for picking up the book. Ext is a lot of fun, and a perfect companion to CF development.
Almost all of my client side app dev is in straight Ext now. I might rapid prototype something for a client before building out a full implementation in Ext, but I will very rarely use the CF Ajax components on a permanent basis.
As far as 'freezing' your columns, I've never heard or seen this done outside of Excel. It might be a nice feature request to throw up on the Ext Forums for the development team. You can hide and display columns fairly easily. I can't really see having so many columns that I need to scroll left and right, at least within my web applications, so it's never become an issue for me.
It looks like the locked config option of the columnmodel will do what I am
looking for. I am just not sure how to set it after cf has loaded the
grid? I was able to use extjs to set the column names and hide/unhide &
make editablr or un. Just not sure how to access this property.
- Keith
contents of the cell when the user clicks or tabs into a cell? I have been
able to "beforeedit" method to capture the event of clicking or tabing
into the cell, but I have just not been able to select the cell contents after
that. (so that the user does not have to manually delete the contents or
manually select the entire contents of the grid to change a value. I tried
to use the CellSelectionModel select method but get an error that .... does
not support this property or method. Any suggestions?