CODEWITHSUNDEEP
extjsdesigner
Victor
Victor

Reputation: 17097

How can I add row numbers to an ExtJS grid?

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?

Upvotes: 8

Views: 16687

Answers (4)

VAAA
VAAA

Reputation: 15039

For version 4.2 very very easy:

Just add a new column like this:

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

Upvotes: 1

Cristi Draghici
Cristi Draghici

Reputation: 1

ExtJS 4.2.1 working code below: 

// Row numberer correct increasing
Ext.override(Ext.grid.RowNumberer, {
    renderer: function(v, p, record, rowIndex) {
        if (this.rowspan) {
            p.cellAttr = 'rowspan="'+this.rowspan+'"';
        }
        var st = record.store;

        if (st.lastOptions.page != undefined && st.lastOptions.start != undefined && st.lastOptions.limit != undefined) {
            var page = st.lastOptions.page - 1;
            var limit = st.lastOptions.limit;
            return limit*page + rowIndex+1;
        } else {
            return rowIndex+1;
        }
    }
});

Upvotes: 0

Lionel Chan
Lionel Chan

Reputation: 8069

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;
}

Upvotes: 7

wes
wes

Reputation: 8185

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}
]);

Upvotes: 18

Related Questions