行の削除/追加後にRownumbererが順番に表示されないExtJS 4.1

Question

rownumbererを使用したグリッドがあります。しかし、行を削除した場合（最後の行を除く）、番号は順番に表示されません。私はすでにgrid.getView().refresh()を使用しましたが、私の問題は解決しませんでした。

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

レンダラを救うためにここに再び助けてください。

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

フィドル：https://fiddle.sencha.com/#view/editor&fiddle/29og