GridRowNumberer

[dongryphon]

Below is a little grid plugin I wrote that puts (and keeps up to date) a row number. It is both a column type and a plugin, so put the instance in both.

Enjoy!

Updated: 31-Oct-2009


// Usage example:

var rowNumberer = new Ext.ux.GridRowNumberer();

new Ext.grid.GridPanel(
{
columns: [ rowNumberer, ... ],
plugins: [ rowNumberer, ... ],
...
});
Here's the plugin:



Ext.ux.GridRowNumberer = Ext.extend(Object,
{
header: "",
isColumn: true,
menuDisabled: true,
//fixed: true,
width: 16,
id: "rowNumCol",
rowspan: undefined,

/**
This CSS class is placed on the TD element of each cell.
*/
cls: "gridRowNumber",

/**
Initializes this instance. Any properties in the supplied config object
are copied on to this object.
*/
constructor: function (cfg)
{
if (cfg)
Ext.apply(this, cfg);

this.renderer = this.renderer.createDelegate(this); // annoyance of how columns work
},

init: function (grid)
{
this.grid = grid;

grid.mon(grid.getView(),
{
rowremoved: this.onRowChange,
rowsinserted: this.onRowChange,
scope: this
});
},

onRowChange: function (view, rowIndex)
{
var colIndex = this.grid.getColumnModel().getIndexById(this.id);

var sel = "div.x-grid3-cell-inner.x-grid3-col-" + this.id;
for (var i = rowIndex, n = view.getRows().length; i < n; ++i)
{
var cell = Ext.fly(view.getCell(i, colIndex)).first(sel, true);
cell.innerHTML = "" + (i+1);
}
},

renderer: function (value, metaData, record, rowIndex, colIndex, store)
{
if (this.cls)
metaData.css = this.cls;
if (this.rowspan)
metaData.cellAttr = 'rowspan="'+this.rowspan+'"';

return rowIndex + 1;
}
});

[safeghost]

hello everybody

I have one problem

When i test the Java/GXT demos presented on this site http://www.extjs.com/examples (http://www.extjs.com/forum/../examples), i dont have errors but i dont obtain the same style.

Can you explain me , whats the problem ?

Thank you !

[mystix]

@dongryphon,

the stock grid.RowNumberer would've worked actually. :)

the only thing it doesn't do is refresh the row numbers when rows are inserted / deleted, which is easily handled by installing rowsremoved/rowinserted listeners on the grid (as you've done in your plugin) and simply calling GridView#refresh() (http://extjs.com/docs/?class=Ext.grid.GridView&member=refresh).

good job on writing a plugin though ;)

[dongryphon]

mystix,

Thanks for the feedback. The reason I wrote the plugin was because the stock RowNumberer was too limited. In particular:


It didn't update properly when rows were added/removed
Refreshing the GridView is too expensive (and not necessary)
I wanted to be able to easily apply a CSS class (to right justify)

I'm glad you reminded me though, because on reviewing Ext.grid.RowNumberer I noticed that my plugin lost the rowspan feature. I'm going to add it after I post this.

Thanks again!

Best,
Don

[mystix]

righto. i see you're updating only the cells containing the row numbers. that's definitely much more efficient.

while you're at it you might want to get your plugin to handle paging as well:
http://www.extjs.com/forum/showthread.php?t=29176
as well as automatically handle resizing the row number column when the numbers hit the thousand range (that's something my plugin's been unable to handle all along ;) )

p.s. don't forget to group your var declarations. :)