ColdFusion 8 Grid Custom Toolbars
Many people have asked how they can add custom toolbars to their grid components. In Ext 2.0 they are built in to the grid panel but in 1.1 they are built in to the grid view. It is the same concept but just tackled a little different. As we all know ColdFusion 8 ships with 1.1 so we will focus on that version. So why the need for custom toolbars? Well our example makes a case for both a header and footer toolbar. We will use the header to provide some nice buttons for adding and deleting records and our footer is a nice place for a status bar.
If you have been following my grid examples lately some of this will look familiar. I will be using the cfartgallery data source that ships with ColdFusion 8. The first thing we need to do is write a query to grab some data from our artists table. Next we setup some grid attributes and pass them in using attribute collection. Finally we are going to call a method called init when the page loads using the ajaxOnLoad tag.
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">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<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")>
In our init method we first need to get the grid object and can do so by using the ColdFusion.Grid.getGridObject method. This method is looking for the name of your grid. Remember that this is case sensitive so make sure you provide exact name that you used as the grids name. Now that we have the grid we can call the getView() method which return the grids view. If you look in the documentation the GridView Class has 2 methods we are interested in; getHeaderPanel() & getFooterPanel. These methods will basically get you a panel in the header or footer of the grid that can be used for toolbars etc.
function init(){
grid = ColdFusion.Grid.getGridObject("ArtistGrid");
var gridFoot = grid.getView().getFooterPanel(true);
var gridHead = grid.getView().getHeaderPanel(true);
}
</script>
var tbar = new Ext.Toolbar(gridHead);
tbar.addButton({
text:"Add New Artist",
cls:"x-btn-text-icon",
icon:"add.png",
handler:onAdd
});
tbar.addSeparator()
tbar.addButton({
text:"Delete Artist",
cls:"x-btn-text-icon",
icon:"delete.png",
handler:onDelete
});
alert("Row Added");
}
function onDelete(){
var grid = ColdFusion.Grid.getGridObject("ArtistGrid");
var record = grid.getSelections();
alert("Artist " + record[0].data.FIRSTNAME + " " + record[0].data.LASTNAME + " deleted");
}
That is really all there is to it. Customizing the AJAX Components that ship with ColdFusion are easy. All you need to do is dig into the Ext documentation and find out what is available to you. As always please leave me any questions / comments.
Example Source Code<head>
<title>Custom Toolbars Example</title>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/toolbar/toolbar.js"></script>
<script type="text/javascript">
function init(){
grid = ColdFusion.Grid.getGridObject("ArtistGrid");
var gridFoot = grid.getView().getFooterPanel(true);
var gridHead = grid.getView().getHeaderPanel(true);
var bbar = new Ext.Toolbar(gridFoot);
var tbar = new Ext.Toolbar(gridHead);
bbar.add(new Ext.Toolbar.TextItem('Total Artists: ' + grid.getDataSource().totalLength));
tbar.addButton({
text:"Add New Artist",
cls:"x-btn-text-icon",
icon:"add.png",
handler:onAdd
});
tbar.addSeparator()
tbar.addButton({
text:"Delete Artist",
cls:"x-btn-text-icon",
icon:"delete.png",
handler:onDelete
});
console.log(tbar);
console.log(bbar);
}
function onAdd(button,event){
alert("Row Added");
console.log(button);
console.log(event);
}
function onDelete(){
var grid = ColdFusion.Grid.getGridObject("ArtistGrid");
var record = grid.getSelections();
alert("Artist " + record[0].data.FIRSTNAME + " " + record[0].data.LASTNAME + " deleted");
}
</script>
</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">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<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")>
<cfsavecontent variable="head">
<link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css" rel="stylesheet" type="text/css">
<link href="/CFIDE/scripts/ajax/ext/resources/css/menu.css" type="text/css" rel="stylesheet"/>
</cfsavecontent>
<cfhtmlhead text="#head#">
</body>
</html>
