danvega.org: Creating a grid toolbar in ColdFusion 9.0.1

Creating a grid toolbar in ColdFusion 9.0.1

Thursday July 29, 2010 4:47 PM

Word Count: 1030

ColdFusion 9 added some new functions for the html grid. I want to take a look at 2 of them today that will make your life a little bit easier. In this example we are going to create a grid and add a toolbar to the grid. In the toolbar we are going to add some buttons with event handlers.

First we need to create a grid to display our artists. <cfquery name="getArtists" datasource="cfartgallery"> SELECT artistId, firstname, lastname, address, city, state, postalcode, email FROM Artists </cfquery> <cfset args = structNew()> <cfset args.name = "ArtistGrid"> <cfset args.format = "html"> <cfset args.query = "getArtists"> <cfform> <cfgrid attributeCollection="#args#"> <cfgridcolumn name="artistid" display="false"> <cfgridcolumn name="firstname" header="First Name"> <cfgridcolumn name="lastname" header="Last Name"> <cfgridcolumn name="email" header="Email Address"> <cfgridcolumn name="address" header="Address"> <cfgridcolumn name="city" header="City"> <cfgridcolumn name="state" header="State"> <cfgridcolumn name="postalcode" header="Zip"> </cfgrid> </cfform> Then we use the ajaxOnLoad() method to call a function. <cfset ajaxOnLoad("init")>

In ColdFusion 9.0.1 we have the ability to get the grids top toolbar. With the top toolbar we can now add elements to it. Finally we use another new function to show the toolbar. function init(){ var tb = ColdFusion.Grid.getTopToolbar("ArtistGrid"); tb.add( {text:'Button 1',handler:btnHandler}, {text:'Button 2',handler:btnHandler}, {xtype: 'tbfill'}, {text:'Button 3',handler:btnHandler}, {text:'Button 4',handler:btnHandler} ); ColdFusion.Grid.showTopToolbar('ArtistGrid'); } function btnHandler(b,e){ alert(b.text + " was pressed."); }

And here is the final result <!doctype html> <html> <head> <title></title> <script type="text/javascript" src="/CFIDE/scripts/ajax/ext/source/widgets/Toolbar.js"></script> <script> function init(){ var tb = ColdFusion.Grid.getTopToolbar("ArtistGrid"); tb.add( {text:'Button 1',handler:btnHandler}, {text:'Button 2',handler:btnHandler}, {xtype: 'tbfill'}, {text:'Button 3',handler:btnHandler}, {text:'Button 4',handler:btnHandler} ); ColdFusion.Grid.showTopToolbar('ArtistGrid'); } function btnHandler(b,e){ alert(b.text + " was pressed."); } </script> <style> body {padding:20px;} </style> </head> <body> <cfquery name="getArtists" datasource="cfartgallery"> SELECT artistId, firstname, lastname, address, city, state, postalcode, email FROM Artists </cfquery> <cfset args = structNew()> <cfset args.name = "ArtistGrid"> <cfset args.format = "html"> <cfset args.query = "getArtists"> <cfform> <cfgrid attributeCollection="#args#"> <cfgridcolumn name="artistid" display="false"> <cfgridcolumn name="firstname" header="First Name"> <cfgridcolumn name="lastname" header="Last Name"> <cfgridcolumn name="email" header="Email Address"> <cfgridcolumn name="address" header="Address"> <cfgridcolumn name="city" header="City"> <cfgridcolumn name="state" header="State"> <cfgridcolumn name="postalcode" header="Zip"> </cfgrid> </cfform> <cfset ajaxOnLoad("init")> </body> </html>

Just a side note, you can also do this for the bottom toolbar as well. Here is a list of all the new JavaScript functions for the grid.

ColdFusion.Grid.getTopToolbar
ColdFusion.Grid.showTopToolbar
ColdFusion.Grid.hideTopToolbar
ColdFusion.Grid.refreshTopToolbar
ColdFusion.Grid.getBottomToolbar
ColdFusion.Grid.showBottomToolbar
ColdFusion.Grid.hideBottomToolbar
ColdFusion.Grid.refreshBottomToolbar

639 Views

Comments

#1 Posted By: Henry Ho Posted On: 7/29/10 6:27 PM

Nice, you've always been the cf ajax / ExtJS saviour. Thanks!

#2 Posted By: Mickey Posted On: 8/26/10 5:14 PM

I'm working with a CFGRID in CF8 and have found some of your earlier posts very useful... thanks!

My grid binds to a CFC and usually produces many pages of results. I'm trying to add a "Please Wait..." type of message and after losing the battle with loadMask, I finally settled for changing the HTML of a DIV object based on certain events (datasource load, header click...) But I can't seem to figure out how to get at the paging buttons at the bottom of my grid to catch when the user clicks one of those.

Can you point me in the right direction on that? Or even better tell me how to get CF to let me use the Ext loadMask?

Thanks!

Creating a grid toolbar in ColdFusion 9.0.1

Comments

Post Your Comment

Navigation

Tagcloud

Archives

Blogs I Read

Recent Entries

Recent Comments

About

Stay Upated