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.

view plain print about
1<cfquery name="getArtists" datasource="cfartgallery">
2SELECT artistId, firstname, lastname, address, city, state, postalcode, email
3FROM Artists
4</cfquery>
5
6<cfset args = structNew()>
7<cfset args.name = "ArtistGrid">
8<cfset args.format = "html">
9<cfset args.query = "getArtists">
10<cfset args.stripeRows = true>
11<cfset args.selectColor = "##D9E8FB">
12
13<cfform>
14    <cfgrid attributeCollection="#args#">
15        <cfgridcolumn name="artistid" display="false">
16        <cfgridcolumn name="firstname" header="First Name">
17        <cfgridcolumn name="lastname" header="Last Name">
18        <cfgridcolumn name="email" header="Email Address">
19        <cfgridcolumn name="address" header="Address">
20        <cfgridcolumn name="city" header="City">
21        <cfgridcolumn name="state" header="State">
22        <cfgridcolumn name="postalcode" header="Zip">
23    </cfgrid>
24</cfform>
25
26<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.

view plain print about
1<script type="text/javascript">
2 function init(){
3        grid = ColdFusion.Grid.getGridObject("ArtistGrid");
4        var gridFoot = grid.getView().getFooterPanel(true);
5        var gridHead = grid.getView().getHeaderPanel(true);
6 }
7 </script>
Now that we have our our header and footer panels we need to create some toolbars to add to them. To do this we need to import the classes used by Ext to create toolbars.
view plain print about
1<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/toolbar/toolbar.js"></script>
Now we are ready to make some toolbars. If you not sure how toolbars work or the properties / methods available to them I suggest you check out the documentation.
view plain print about
1var bbar = new Ext.Toolbar(gridFoot);
2var tbar = new Ext.Toolbar(gridHead);
Now I can start adding items to my toolbar. In the footer toolbar I am going to add a text item that will display the number of records used by the grids datasource. In the header I am going to add a couple of buttons that mix text and icons. You will notice for that each button their is a handler attribute. This is the method that will be called when the buttons click event is activated.
view plain print about
1bbar.add(new Ext.Toolbar.TextItem('Total Artists: ' + grid.getDataSource().totalLength));
2        
3        tbar.addButton({
4         text:"Add New Artist",
5         cls:"x-btn-text-icon",
6         icon:"add.png",
7         handler:onAdd
8        });
9        tbar.addSeparator()
10        tbar.addButton({
11         text:"Delete Artist",
12         cls:"x-btn-text-icon",
13         icon:"delete.png",
14         handler:onDelete
15        });
Now we can add our button methods. These methods do not do much right now but you see how easy it would be to add some real functionality.
view plain print about
1function onAdd(button,event){
2 alert("Row Added");
3 }
4 function onDelete(){
5 var grid = ColdFusion.Grid.getGridObject("ArtistGrid");
6 var record = grid.getSelections();
7 alert("Artist " + record[0].data.FIRSTNAME + " " + record[0].data.LASTNAME + " deleted");
8 }

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
view plain print about
1<html>
2<head>
3 <title>Custom Toolbars Example</title>
4
5 <script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/toolbar/toolbar.js"></script>
6
7 <script type="text/javascript">
8 function init(){
9        grid = ColdFusion.Grid.getGridObject("ArtistGrid");
10        var gridFoot = grid.getView().getFooterPanel(true);
11        var gridHead = grid.getView().getHeaderPanel(true);
12        
13        var bbar = new Ext.Toolbar(gridFoot);
14        var tbar = new Ext.Toolbar(gridHead);
15        
16        bbar.add(new Ext.Toolbar.TextItem('Total Artists: ' + grid.getDataSource().totalLength));
17        
18        tbar.addButton({
19         text:"Add New Artist",
20         cls:"x-btn-text-icon",
21         icon:"add.png",
22         handler:onAdd
23        });
24        tbar.addSeparator()
25        tbar.addButton({
26         text:"Delete Artist",
27         cls:"x-btn-text-icon",
28         icon:"delete.png",
29         handler:onDelete
30        });
31        
32        console.log(tbar);
33        console.log(bbar);
34
35 }
36
37 function onAdd(button,event){
38 alert("Row Added");
39
40 console.log(button);
41 console.log(event);
42 }
43 function onDelete(){
44 var grid = ColdFusion.Grid.getGridObject("ArtistGrid");
45 var record = grid.getSelections();
46 alert("Artist " + record[0].data.FIRSTNAME + " " + record[0].data.LASTNAME + " deleted");
47 }
48 </script>
49</head>
50<body>
51
52<cfquery name="getArtists" datasource="cfartgallery">
53SELECT artistId, firstname, lastname, address, city, state, postalcode, email
54FROM Artists
55</cfquery>
56
57<cfset args = structNew()>
58<cfset args.name = "ArtistGrid">
59<cfset args.format = "html">
60<cfset args.query = "getArtists">
61<cfset args.stripeRows = true>
62<cfset args.selectColor = "##D9E8FB">
63
64<cfform>
65    <cfgrid attributeCollection="#args#">
66        <cfgridcolumn name="artistid" display="false">
67        <cfgridcolumn name="firstname" header="First Name">
68        <cfgridcolumn name="lastname" header="Last Name">
69        <cfgridcolumn name="email" header="Email Address">
70        <cfgridcolumn name="address" header="Address">
71        <cfgridcolumn name="city" header="City">
72        <cfgridcolumn name="state" header="State">
73        <cfgridcolumn name="postalcode" header="Zip">
74    </cfgrid>
75</cfform>
76
77<cfset ajaxOnLoad("init")>
78
79
80
81 <cfsavecontent variable="head">
82 <link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css" rel="stylesheet" type="text/css">
83 <link href="/CFIDE/scripts/ajax/ext/resources/css/menu.css" type="text/css" rel="stylesheet"/>
84 </cfsavecontent>
85
86 <cfhtmlhead text="#head#">
87
88</body>
89</html>
 

This entry was posted on March 5, 2008 at 10:19 AM and has received 14583 views. Comments 37 | Print this entry.