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: Demo unavailable.

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. Demo unavailable.

view plain print about
1<head>
2    <script type="text/javascript" src="js/SlidingPager.js"></script>
3    <InvalidTag type="text/javascript" src="js/SliderTip.js"></script>
4    <InvalidTag>
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. Demo unavailable.

The code change involves a simple line change to the plugins parameter.

view plain print about
1<head>
2    <InvalidTag type="text/javascript" src="js/ProgressBarPager.js"></script>
3    <InvalidTag>
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>