View Full Version : [2.0] Paged Grid Row Numberer

18 Oct 2007, 7:41 AM
The basic row numberer is not much good for a paged grid. I had a quick look and modified the code to work for a paged grid.

A few things to note. You will need to set the width according to what you think the maximum row number is that you are likely to use. At the moment I can't think of a way to resize the column according to the number of characters in the number.

Also, the standard column styling breaks down if the row number has more than two digits. So you will probably want to apply some custom styling as well.

You can leave out the toLocaleString function if you don't want to add commas/dots etc to the numbers. There may also be some issues with using this function in older browsers. (Easy enough to write your own function to replace this.)

The hideable boolean option determines if the column shows in the header context menu.

Here is the code:

Ext.grid.PagedRowNumberer = function(config){
Ext.apply(this, config);
this.renderer = this.renderer.createDelegate(this);

Ext.grid.PagedRowNumberer.prototype = {
header: "",
width: 35,
sortable: false,
hideable: false,
dataIndex: '',
id: 'numberer',
rowspan: undefined,

renderer : function(v, p, record, rowIndex, colIndex, store){
p.cellAttr = 'rowspan="'+this.rowspan+'"';
var i = store.lastOptions.params.start;
if (isNaN(i)) {
i = 0;
i = i + rowIndex + 1;
i = Number(i).toLocaleString(); //May not work in all browsers.
return i;

The standard styles can be found in grid.css. You can modify these, or change the "id" from "numberer" and this will replace "numberer" in the style name to give you custom styles.

/* Numberer */

.x-grid3-body .x-grid3-td-numberer {
background:transparent url(../images/default/grid/grid3-special-col-bg.gif) repeat-y right;
.x-grid3-body .x-grid3-td-numberer .x-grid3-cell-inner {
padding:3px 5px 0 0 !important;

/* All specials */

.x-grid3-body .x-grid3-row-selected .x-grid3-td-numberer {
background:transparent url(../images/default/grid/grid3-special-col-sel-bg.gif) repeat-y right;

Refer to the grid demos for an example of how to use this.


21 Oct 2007, 4:08 AM
It's working =D>
Thanks a lot !!!

26 Nov 2007, 12:27 AM
One little remark. You should set "fixed: true", otherwise you will be able to hide ALL columns and be unable to get them back.

5 Dec 2007, 1:47 AM
I do believe this is a bug (in 2.0rc1) relating to "fixed" and "hideable". I know I have my own overrides in place to correct this bug, but hopefully these issues will be fixed in the next release.


10 Dec 2007, 12:03 AM
Nope, it doesn't. I can still hide all columns when I set fixed to false in your plugin.

13 Dec 2007, 1:30 AM
I've checked the Ext 2.0 code and this hasn't been corrected. For some reason "hideable" was added to the ColumnModel docs but it looks like they forgot to do the relevant code changes. If I have time I will try and separate out a simple override that you can include. (I have it working in my own code, but lots of other mods as well, so I need to separate it out and test it.) Otherwise for vanilla 2.0 I guess you are stuck with using the fixed:true option.


27 Aug 2008, 6:00 PM
I use custom renderer to add paged Grid Row Numerer like this:

header: "#",
width: 30,
renderer: this.rowNumberer.createDelegate(this)

rowNumberer : function(value, p, record) {
var ds = record.store
var i = ds.lastOptions.params.start
if (isNaN(i)) {
i = 0;
return ds.indexOf(record)+i+1