Rownumberer doesn't appear in sequence after deleting/adding row ExtJS 4.1

Question

I have a grid using rownumberer. But if I delete any row (except for the last row), the number doesn't appear in sequence. I've already use grid.getView().refresh() but it didn't solve my problem. Please help

var productHardwareGrid = Ext.create('Ext.grid.Panel', {
    id: 'productHardwareGrid',
    store: prodHardGridStore,
    selModel: prodHardCheckBoxSelection,
    frame: false,
    loadMask: true,
    stripeRows: true,
    autoScroll: true, 
    preventRender: true,    
    tbar: [{
            xtype: 'button',
            text: 'Add Product',
            id: 'addProductHW',
            iconCls: "icon-grid-add",
            handler: function () {
                prodWinAdd('productHardwareGrid', 'HW');
            }
        },
            {
                xtype: 'button',
                text: 'Delete Product',
                iconCls: "icon-grid-delete",
                handler: function () {
                    prodDelete('HW');
                    productHardwareGrid.getView().refresh();
                },
                id: 'prodHardDelBtn',
                disabled: true
            }
        ],
            columns: [
            {
                xtype: 'rownumberer',
                header: 'No',
                defaults: {
                    align: 'center',
                    flex: 0,
                    width: 40,
                    sortable: false,
                    menuDisabled: true
                }
            },

Answer 1

renderer is again here to save the day.

var data = [];

for(var i=0;i<10; i++) {
    data.push({name: i, age: 1});
}

Ext.application({
    name: 'Fiddle',

    launch: function () {

    var store = new Ext.data.Store({
        fields: ['name', 'age'],
        data: data,
        autoLoad: true,
        pageSize: 10
    });
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'grid',
            id: "grid1",
            columns: [{
                xtype: 'rownumberer',
                renderer: function (value, metaData, record, rowIdx, colIdx, store) {
                    var rowspan = this.rowspan;
                    if (rowspan) {
                        metaData.tdAttr = 'rowspan="' + rowspan + '"';
                    }
                    metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
                    return store.indexOf(record) + 1;
                }
            }, {
                text: 'name',
                dataIndex: 'name',
                flex: 1
            }, {
                text: 'age',
                dataIndex: 'age',
                flex: 1
            }],
            store: store
        }],
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                xtype: 'button',
                text: 'Delete 1st',
                handler: function () {
                    store.removeAt(0);
                    var grid = Ext.getCmp('grid1');
                    grid.view.refresh();
                }
            }]
        }]
    });
}
});

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29og