Adding Paging Row Numberer in EXT JS Grid Panel having paging toolbar

There are two types of classes provides by EXT JS for showing row numberer:

First in which there is no pagination on grid panel:
new Ext.grid.RowNumberer();


The above only works in non pagination grid panel. Because in paginated grid panel, when we move to next page it again starts row numberer from 1.

Second , in which there is pagination on grid panel:
new Ext.ux.grid.PagingRowNumberer()
This above one works fine in both non paginated grid panel and paginated grid panel.


Following is the code example, of using row numberer

var grid4 = new xg.GridPanel({
        id:'button-grid',
        store: store,
cm: new xg.ColumnModel([
new Ext.ux.grid.PagingRowNumberer(),      // adding paging row numberer  
        {header: "A", dataIndex: 'x'},
        {header: "B", dataIndex: 'y'}
        ]),
      sm: sm2,
tbar: new Ext.PagingToolbar({ // add pagination
        pageSize: 10,
        store: store,
        displayInfo: true,
        displayMsg: 'Displaying records {0} - {1} of {2}',
        emptyMsg: "No records to display"   
    }),
        viewConfig: {
            forceFit:true,
   scrollOffset:0,
   emptyText :'No record(s) found.'
        },
        autoHeight: true,
        frame:true,
stripeRows:true,
loadMask:true, enableHdMenu: false,
enableColumnMove: false,      
        renderTo: 'abcxyz'
    });