Implementing Ext JS Custom Paging Toolbars with ColdFusion 9 cfgrid

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

If you look at Ext JS examples for 3.0 release you will notice a lot of (New) stuff. The 3.0 release includes a bunch of new plugins to the normal Ext grid framework. A couple of these plugins deal with rendering a different type of paging bar.

Note: The demos/samples for ColdFusion 9 will be a bit slow to load due to them being hosted on a cheap VPS server (the best I could do).

Out of the box, the normal ColdFusion 9 cfgrid has the standard Ext JS paging bar. A demo of the ColdFusion 9 cfgrid can be viewed here: ColdFusion 9 CFGRID.

We will now replace the standard paging bar with a Sliding Pager and a Progress Bar Pager in this blog post.

We will first look at the Sliding Pager implementation. A demo of the Sliding Bar Pager can be viewed Here.

view plain print about

<head>
	<script type="text/javascript" src="js/SlidingPager.js"></script>
	<script type="text/javascript" src="js/SliderTip.js"></script>
	<script>
		function gridSmash()
		{
			//Get Grid Object
			grid = ColdFusion.Grid.getGridObject('usersgrid');					
			//Get the Column Model
	   		cols = grid.getColumnModel();
	   		//Set the column model to add Row Numbering
			configA = cols.config;			
			newcolumn = new Ext.grid.RowNumberer();			
			temp = configA.splice(0,0,newcolumn);						
			
			//Destroy and Eliminate the current paging toolbar			
			grid.getBottomToolbar().destroy();
			
			//The new paging toolbar
			var bbar2 = new Ext.PagingToolbar({
				renderTo: grid.bbar, //We render it to the current grid's bottom bar
		        pageSize: 25,//Pagesize set
		        store: grid.getStore(),//Grid's store set
		        displayInfo: true,//Display the records information
		        plugins: new Ext.ux.SlidingPager()//The plugin that will render the toolbar
		    });
			
			grid.syncSize();//Sync to size up everything properly again
						
		}
		
	</script>
</head>

<body>
	<div align="center">
		<cfform>
			<cfgrid title="Users" name="usersgrid" pagesize="25" format="html" colheaderbold="true" colheaderfont="Verdana" colheaderfontsize="90%"
				align="middle" colheaderalign="center" collapsible="true"  selectOnLoad="false"
				font="Verdana" fontsize="90%" striperows="true" striperowcolor="##F0FAFF"
				bind="cfc:Users.getUsers({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
				
				<cfgridcolumn name="FirstName" header="First Name" width="150">
				<cfgridcolumn name="LastName" header="Last Name" width="150">
				<cfgridcolumn name="UserName" header="User Name" width="150">
				<cfgridcolumn name="DisplayName" header="Display Name" width="150">
				
									
			</cfgrid>
		</cfform>
	</div>
	
	
	
	<cfset AjaxOnLoad("gridSmash")>

</body>

1  <head>
2      <script type="text/javascript" src="js/SlidingPager.js"></script>
3      <script type="text/javascript" src="js/SliderTip.js"></script>
4      <script>
5          function gridSmash()
6          {
7              //Get Grid Object
8              grid = ColdFusion.Grid.getGridObject('usersgrid');
9              //Get the Column Model
10               cols = grid.getColumnModel();
11               //Set the column model to add Row Numbering
12              configA = cols.config;
13              newcolumn = new Ext.grid.RowNumberer();
14              temp = configA.splice(0,0,newcolumn);
15
16              //Destroy and Eliminate the current paging toolbar
17              grid.getBottomToolbar().destroy();
18
19              //The new paging toolbar
20              var bbar2 = new Ext.PagingToolbar({
21                  renderTo: grid.bbar, //We render it to the current grid's bottom bar
22           pageSize: 25,//Pagesize set
23           store: grid.getStore(),//Grid's store set
24           displayInfo: true,//Display the records information
25           plugins: new Ext.ux.SlidingPager()//The plugin that will render the toolbar
26           });
27
28              grid.syncSize();//Sync to size up everything properly again
29
30          }
31
32      </script>
33  </head>
34
35  <body>
36      <div align="center">
37          <cfform>
38              <cfgrid title="Users" name="usersgrid" pagesize="25" format="html" colheaderbold="true" colheaderfont="Verdana" colheaderfontsize="90%"
39                  align="middle" colheaderalign="center" collapsible="true" selectOnLoad="false"
40                  font="Verdana" fontsize="90%" striperows="true" striperowcolor="##F0FAFF"
41                  bind="cfc:Users.getUsers({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
42
43                  <cfgridcolumn name="FirstName" header="First Name" width="150">
44                  <cfgridcolumn name="LastName" header="Last Name" width="150">
45                  <cfgridcolumn name="UserName" header="User Name" width="150">
46                  <cfgridcolumn name="DisplayName" header="Display Name" width="150">
47
48
49              </cfgrid>
50          </cfform>
51      </div>
52
53
54
55      <cfset AjaxOnLoad("gridSmash")>
56
57  </body>

First we define our normal cfgrid tag. When the page is loaded we call the gridSmash() function. This function does a few things:

Add the Row Numbering to the grid
Removes the default paging toolbar and replaces it with one defined through Ext.ux.SlidingPager

Similarly, we can implement a Progress Bar Pager by using another plugin. You can view a demo of the Progress Bar Pager on cfgrid Here. The code change involves a simple line change to the plugins parameter.

view plain print about

<head>
	<script type="text/javascript" src="js/ProgressBarPager.js"></script>
	<script>
		function gridSmash()
		{
			grid = ColdFusion.Grid.getGridObject('usersgrid');					
	   		cols = grid.getColumnModel();
			configA = cols.config;			
			newcolumn = new Ext.grid.RowNumberer();			
			temp = configA.splice(0,0,newcolumn);						
			
			grid.getBottomToolbar().destroy();
			//The new paging toolbar
			var bbar2 = new Ext.PagingToolbar({
				renderTo: grid.bbar, //We render it to the current grid's bottom bar
		        pageSize: 25,//Pagesize set
		        store: grid.getStore(),//Grid's store set
		        displayInfo: true,//Display the records information
		        plugins: new Ext.ux.ProgressBarPager()//The plugin that will render the toolbar
		    });
			
			grid.syncSize();
						
		}
		
	</script>
</head>

1  <head>
2      <script type="text/javascript" src="js/ProgressBarPager.js"></script>
3      <script>
4          function gridSmash()
5          {
6              grid = ColdFusion.Grid.getGridObject('usersgrid');
7               cols = grid.getColumnModel();
8              configA = cols.config;
9              newcolumn = new Ext.grid.RowNumberer();
10              temp = configA.splice(0,0,newcolumn);
11
12              grid.getBottomToolbar().destroy();
13              //The new paging toolbar
14              var bbar2 = new Ext.PagingToolbar({
15                  renderTo: grid.bbar, //We render it to the current grid's bottom bar
16           pageSize: 25,//Pagesize set
17           store: grid.getStore(),//Grid's store set
18           displayInfo: true,//Display the records information
19           plugins: new Ext.ux.ProgressBarPager()//The plugin that will render the toolbar
20           });
21
22              grid.syncSize();
23
24          }
25
26      </script>
27  </head>