With the release of ExtJS 3.0 and the ColdFusion 9 beta I have been digging into the library more. One of the libraries for the grids that ExtJS Core offers is Numbering the grid rows on the current page. ColdFusion doesn't have that option, so I decided to implement it. It was quite simple actually.

Note: This was all done on ColdFusion 9 beta and Ext JS 3.0. ColdFusion 8 ships with ExtJS 1.1 and I am not sure whether the RowNumberer class was present in version 1.1 or not. Also, since we don't have a ColdFusion 9 beta host (or if there is one I haven't found it), you will have to do with screenshots.

So, here is how the grid looks (and this thing looks a lot better than the ColdFusion 8 grid)

The code that it takes to get this numbering is quite simple. After you have setup your grid, you need to call a javascript function when the page has finished loaded. Similar too:

view plain print about
1<cfset AjaxOnLoad("gridSmash")>

The gridSmash function then gets the grid and the column model for the grid. Then it gets our new RowNumberer column and adds it to the grid configuration. We use the splice method and add it to position 0 of the config array.

view plain print about
1function gridSmash()
2{
3    grid = ColdFusion.Grid.getGridObject('usersgrid');//Our Grid
4    cols = grid.getColumnModel();//Grid's Column Model
5    configA = cols.config;//Column Model Configuration
6    newcolumn = new Ext.grid.RowNumberer();    //Our new Row Numbering Column    
7    temp = configA.splice(0,0,newcolumn);//Add the new column to the configuration at position 0 (first column)
8                        
9}

Download Full Source: