Adding Ext JS Buttons to ColdFusion 9 cfgrid Paging Toolbar

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 plainprintabout
 function gridSmash()
 {
     grid = ColdFusion.Grid.getGridObject('usersgrid');             
     //Below code adds the Row Numbering to the grid
     cols = grid.getColumnModel();
     configA = cols.config;            
     newcolumn = new Ext.grid.RowNumberer();    //Adds the Row Numbering to the grid        
     temp = configA.splice(0,0,newcolumn);            
     
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  }
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Dan Fredericks's Gravatar I see you can add a button to the bottom bar, but how can I remove the bar and display all my data with a scroll bar? I need to use the bind to a cfc, but don't want the paging option.
Any ideas?

thanks
Dan
# Posted By Dan Fredericks | 5/17/10 3:23 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.5.003.  Design based on ARCLITE by: digitalnature