How can I add row numbers to an ExtJS grid?

Question

In an ExtJS GridPanel, is there a way to design a column whose sole purpose is to act as a serial number column? This column will not need a dataIndex property. Right now, I am using a custom row numberer function, but this means the row numberer is defined in the grid.js file and all columns from grid.ui.js needs to be copied into grid.js. I am using the Ext designer.

EDIT: The crux of my question is: Is there a way to define a row numberer using the Ext designer?

Answer 1

All you need is an Ext.grid.RowNumberer in your column definition.

var colModel = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {header: "Name", width: 80, sortable: true},
    {header: "Code", width: 50, sortable: true},
    {header: "Description", width: 200, sortable: true}
]);

Answer 2

Not an answer, but just want to share this:-

On top of the Ext.grid.RowNumberer, you can have this small nifty hack which will increments your numbers correctly according to the page number that you are viewing if you have implemented PagingToolbar in your grid.

Below is my working example. I extended the original Ext.grid.RowNumberer to avoid confliction.

Kore.ux.grid.RowNumberer = Ext.extend(Ext.grid.RowNumberer, {
    renderer: function(v, p, record, rowIndex) {
        if (this.rowspan) {
            p.cellAttr = 'rowspan="'+this.rowspan+'"';
        }
        var st = record.store;
        if (st.lastOptions.params && st.lastOptions.params.start != undefined && st.lastOptions.params.limit != undefined) {
            var page = Math.floor(st.lastOptions.params.start/st.lastOptions.params.limit);
            var limit = st.lastOptions.params.limit;
            return limit*page + rowIndex+1;
        }else{
            return rowIndex+1;
        }
    }
});

---

And the code below is the original renderer from Ext.grid.RowNumberer, which, to me, pretty ugly because the numbers is fixed all the time no matter what page number it is.

renderer : function(v, p, record, rowIndex){
    if(this.rowspan){
        p.cellAttr = 'rowspan="'+this.rowspan+'"';
    }
    return rowIndex+1;
}

Answer 3

For version 4.2 very very easy:

Just add a new column like this:

{
    xtype: 'rownumberer',
    width: 40,
    sortable: false,
    locked: true
}