Adding Ext JS Buttons to ColdFusion 9 cfgrid Paging Toolbar

Posted At : July 24, 2009 1:17 PM | Posted By : Kumar
Related Categories: ColdFusion 9, Web Development, ExtJS, RIA, Ajax

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

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);			
	
	bbar = grid.getBottomToolbar();	//Get the toolbar		
	//Add the button
	bbar.add('-', {
        pressed: false,
		enableToggle:false,
		text: 'Add',
		icon:'css/add.png',//Icon graphic
		cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
		handler:addShow//Our javascript handler function that displays the alert
	});
	//Reconfigure the layout of the toolbar again, this causes the button to show on the toolbar
	bbar.doLayout();		
}

1  function 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  }

Comments (1) |

Print |

Send |

del.icio.us |

Digg It! |

Linking Blogs | 2077 Views

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment] [Subscribe to Comments]

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

[Add Comment]