Just a quick post about how to go about adding custom buttons to the cfgrid's paging toolbar. I believe this has changed from Ext 1.1 (which ColdFusion 8 implements) to Ext 3.0 (which ColdFusion 9 implements).

You can see the normal cfgrid here. It comes with no buttons, and it as such with a grid implementation it would suit us if we could show add/edit/delete buttons.

So, you can get your pretty icons and add some nice buttons to the grid allowing users to perform operations. I have one up with an add button.

Code follows

The code for adding buttons is fairly simple. You call a javascript function using AjaxOnLoad() and in that function we do the magic.

view plain print about
1function gridSmash()
2{
3    grid = ColdFusion.Grid.getGridObject('usersgrid');             
4    //Below code adds the Row Numbering to the grid
5    cols = grid.getColumnModel();
6    configA = cols.config;            
7    newcolumn = new Ext.grid.RowNumberer();    //Adds the Row Numbering to the grid        
8    temp = configA.splice(0,0,newcolumn);            
9    
10    bbar = grid.getBottomToolbar();    //Get the toolbar        
11    //Add the button
12    bbar.add('-', {
13 pressed: false,
14        enableToggle:false,
15        text: 'Add',
16        icon:'css/add.png',//Icon graphic
17        cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
18        handler:addShow//Our javascript handler function that displays the alert
19    });
20    //Reconfigure the layout of the toolbar again, this causes the button to show on the toolbar
21    bbar.doLayout();        
22}