CFGRID: How to add your own buttons to the bottom toolbar with paging info ( result count ): cfgrid, button, paging

PROBLEM: How to add your own buttons to the bottom toolbar with paging info ( result count ).

While creating a cfgrid, I ran into an issue where I wanted to embed my own custom buttons where the default ones ( insert / delete / etc… ) are for aesthetic purposes. In addition I also wanted to include a result count so that the user would know which set of the results they were looking at out of the total.

It took a bit of searching but I ended up combining a few code snippets and thought I would share the results of my endeavor. I hope you find them helpful!

Step by step solution:
( skip to the bottom if you want the full source – requires minimal modification )

Step 1:

- Would be to create your <cfgrid> and a .cfc to populate it with some data.

Here is a great <cfgrid> tutorial if you require assistance on creating a <cfgrid> as I will not be covering that here:
http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-3-Live-Data-Grids

Step 2:

- It is important that the following <script> be placed inside of the <head> </head> tags of your page:
("YourGridName" should be replaced with the name of your cfgrid )

NOTE: You should replace the "showWin" function which with whatever function you want to run as the handler for each button.

<script>
	init=function(){
		//get the grid component 
		grid = ColdFusion.Grid.getGridObject("YourGridName");

		//overwrite existing grid footer with new div, Ext.id() will assign unique id to footer
		var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);

		//Create new PaginToolbar and render it to bbar (grid footer)
		gbbar = new Ext.PagingToolbar({renderTo:bbar, 
			store: grid.store, 
			pageSize: 25, 
			displayInfo: true, 
			displayMsg: '<b>Showing {0} - {1} out of {2}</b>', 
			emptyMsg: "<b>No Record</b>",
			items:[
				'-', {
				pressed: false,
				enableToggle:false,
				text: 'Your 1st Button',// The text that will show for the button in the bar
				icon:'css/add.png',//Icon graphic
				cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
				handler:showWin// handler:showWin // should be replaced with your own function
				}, 				
				'-', {
				pressed: false,
				enableToggle:false,
				text: 'Your 2nd Button',// The text that will show for the button in the bar
				icon:'css/add.png',//Icon graphic
				cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
				handler:showWin2// handler:showWin2 // should be replaced with your own function
				}
			]
		});
	}
	
	function showWin(){
		alert('Button 1 works!!! :-)');
	}

	function showWin2(){
		alert('Button 2 works!!! :-)');
	}	
</script>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:

Select all Open in new window

If you only want to add buttons (no result set count) change the following to false: displayInfo: true,

If you only want the result set count remove the following:

,
			items:[
				'-', {
				pressed: false,
				enableToggle:false,
				text: 'Your 1st Button',// The text that will show for the button in the bar
				icon:'css/add.png',//Icon graphic
				cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
				handler:showWin// handler:showWin // should be replaced with your own function
				}, 				
				'-', {
				pressed: false,
				enableToggle:false,
				text: 'Your 2nd Button',// The text that will show for the button in the bar
				icon:'css/add.png',//Icon graphic
				cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
				handler:showWin2// handler:showWin2 // should be replaced with your own function
				}
			]

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

Select all Open in new window

Step 3:

- Calling your init script - place the following code after your <cfgrid> inside the <body> tag:

<cfset ajaxOnLoad("init")>

1:

Select all Open in new window

CONCLUSION:

Using the script provided you should be able to add as many buttons as space provides to the bottom of your cfgrid, and have the current result set count at the bottom right side of your bar.

I have attached a demo page below but you will need to replace the <cfgrid> with your own, and "YourGridName" in the init function to make it work

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Buttons & Paging in the toolbar</title>

<script>
	init=function(){
		//get the grid component 
		grid = ColdFusion.Grid.getGridObject("YourGridName");

		//overwrite existing grid footer with new div, Ext.id() will assign unique id to footer
		var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);

		//Create new PaginToolbar and render it to bbar (grid footer)
		gbbar = new Ext.PagingToolbar({renderTo:bbar, 
			store: grid.store, 
			pageSize: 25, 
			displayInfo: true, 
			displayMsg: '<b>Showing {0} - {1} out of {2}</b>', 
			emptyMsg: "<b>No Record</b>",
			items:[
				'-', {
				pressed: false,
				enableToggle:false,
				text: 'Your 1st Button',// The text that will show for the button in the bar
				icon:'css/add.png',//Icon graphic
				cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
				handler:showWin// handler:showWin // should be replaced with your own function
				}, 				
				'-', {
				pressed: false,
				enableToggle:false,
				text: 'Your 2nd Button',// The text that will show for the button in the bar
				icon:'css/add.png',//Icon graphic
				cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
				handler:showWin2// handler:showWin2 // should be replaced with your own function
				}
			]
		});
	}
	
	function showWin(){
		alert('Button 1 works!!! :-)');
	}	
	function showWin2(){
		alert('Button 2 works!!! :-)');
	}	

</script>

</head>

<body>

<cfform name="YourGridFormName">

<!--- Replace the following with your cfgrid, this one is only here as a placeholder --->
<cfgrid name="YourGridName"
         format="html"
         pagesize="25"
         striperows="yes"
         gridlines="yes"
         selectmode="row"
         bind="cfc:yourCFC_Name.yourLoadFunctionName({cfgridpage},
                              {cfgridpagesize},
                              {cfgridsortcolumn},
                              {cfgridsortdirection})"
         onchange="cfc:yourCFC_Name.yourFunctionName({cfgridaction},
                                 {cfgridrow},
                                 {cfgridchanged})">
      <cfgridcolumn name="myCol1" header="Column 1" width="100"/>
      <cfgridcolumn name="myCol2" header="Column 2" width="100"/>
      <cfgridcolumn name="myCol3" header="Column 3" width="100"/>
   </cfgrid>

</cfform>



<cfset ajaxOnLoad("init")>

</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:

Select all Open in new window

References Used ( The above code is a combination of the following ):

http://www.coldfusion-ria.com/Blog/index.cfm/2009/7/24/Adding-Ext-JS-Buttons-to-ColdFusion-9-cfgrid-Paging-Toolbar

http://csm2kh.blogspot.com/2008/10/extjs-grid-button-in-pagingtoolbar.html

CFGRID: How to add your own buttons to the bottom toolbar with paging info ( result count )

cfgrid

button

paging

Cold Fusion Markup Language

About The Author

More Articles From stu215

Comments

Add your Comment

Join Experts Exchange Today

Gain Access to all our Tech Resources

Get personalized answers

Access Proven Solutions

Read In-Depth How-To Guides

Watch Step by Step Tutorials

And Much More!

Top ColdFusion Language Experts