Adding ExtJS Row Numbering to ColdFusion cfgrid

Posted At : July 16, 2009 8:56 PM | Posted By : Kumar
Related Categories: ColdFusion 9, Web Development, ExtJS, RIA, Ajax

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

<cfset AjaxOnLoad("gridSmash")>

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

function gridSmash()
{
	grid = ColdFusion.Grid.getGridObject('usersgrid');//Our Grid
	cols = grid.getColumnModel();//Grid's Column Model
	configA = cols.config;//Column Model Configuration
	newcolumn = new Ext.grid.RowNumberer();	//Our new Row Numbering Column	
	temp = configA.splice(0,0,newcolumn);//Add the new column to the configuration at position 0 (first column)
						
}

1  function 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: