Ordering rownumberer after adding or deleting from the store ExtJS4.1

Question

I have a extjs store which produces a grid. In the first column of the grid I have a rownumberer xtype to generate the serial number.

In the grid I can add(from other grid) or delete records through some action.While adding it copies the row number from the other grid. I want the rownumberer is to be sorted after every addition or removal.Please help.

 items: [

     {
         xtype: 'grid',
         id: 'allSurveyGrid',
         store: alludfStore,
         border: false,
         width: 600,
         height: 250,
         layout: 'fit',
         columns: [{
                 xtype: 'rownumberer'
             }, {
                 header: 'Date',
                 sortable: false,
                 dataIndex: 'createdDt',
                 flex: 0.3
             }, {
                 header: 'Question Name',
                 sortable: false,
                 dataIndex: 'questiontext',
                 flex: 1
             }
         ],
         selModel: {
             mode: 'MULTI'
         },
     }, {
         xtype: 'tbspacer',
         height: 10
     }, {
         xtype: 'container',
         header: false,
         style: {
             left: '465px'
         },
         layout: {
             type: 'hbox'
         },
         items: [{
                 xtype: 'tbspacer',
                 width: 250
             }, {
                 xtype: 'button',
                 text: '▼',
                 id: 'selectQn',
                 //flex: 1,
                 height: 40,
                 width: 40,
                 handler: function () {
                     //Elison : Delegate this to controller once the function is ready.

                     var allSurveyGrid = Ext.getCmp("allSurveyGrid");
                     var selModels = allSurveyGrid.getView().getSelectionModel().getSelection();
                     var selSurveyGrid = Ext.getCmp("addSurveyGrid");
                     var selectedSurveyStore = selSurveyGrid.getStore();
                     var countOfQuestion = 0;

                     if (selModels.length == 0) {
                         Ext.Msg.alert('       ' + 'ERROR', "Select atleast one question to add.");
                         return;
                     }

                     for (var c = 0; c < selectedSurveyStore.data.length; c++) {
                         item = selectedSurveyStore.data.items[c].data;
                         if (item.qName !== null && item.qName !== "") {
                             countOfQuestion = countOfQuestion + 1;
                         } else {
                             selectedSurveyStore.remove(selectedSurveyStore.getAt(c));
                         }
                     }
                     var finalCount = countOfQuestion + (selModels.length);
                     if (finalCount >= 16) {
                         Ext.Msg.alert('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + 'ERROR', "More than 15 UDF is not allowed");
                         return;
                     } else {
                         // selectedSurveyStore.add(selModels);
                         /* for(var x=0;x<selModels.length;x++){
                                                                                                               selModels.getAt[0].set('questionId',selectedSurveyStore.data.length+1);
                                                                                                           }*/
                         selectedSurveyStore.loadData(selModels, true);
                         selSurveyGrid.getView().refresh();
                     }
                 }
             }, {
                 xtype: 'tbspacer',
                 width: 10
             }, {
                 xtype: 'button',
                 text: '&#9650;',
                 id: 'unSelectQn',
                 height: 40,
                 width: 40,
                 style: {
                     borderRadius: 0
                 },
                 //flex: 1,
                 handler: function () {
                     var selSurveyGrid = Ext.getCmp("addSurveyGrid");
                     var selModels = selSurveyGrid.getView().getSelectionModel().getSelection();
                     var selectedSurveyStore = selSurveyGrid.getStore();
                     selectedSurveyStore.remove(selModels);
                 },

             }, {
                 xtype: 'tbspacer',
                 width: 250
             }
         ]
     }, {
         xtype: 'tbspacer',
         height: 10
     }, {
         xtype: 'grid',
         id: 'addSurveyGrid',
         store: addudfStore,
         border: false,
         width: 600,
         height: 250,
         layout: 'fit',
         columns: [{
                 xtype: 'rownumberer'
             }, {
                 header: 'Date',
                 sortable: false,
                 dataIndex: 'createdDt',
                 flex: 0.3
             }, {
                 header: 'Question Name',
                 sortable: false,
                 dataIndex: 'questiontext',
                 flex: 1
             }
         ],
         selModel: {
             mode: 'MULTI'
         },
         viewConfig: {
             plugins: {
                 ptype: 'gridviewdragdrop'
             }
         }
     }
 ]

Answer 1

https://www.sencha.com/forum/showthread.php?240240-Refresh-RowNumberer-after-store.insert()

FYI:

/**重写rownumber*/
Ext.override(Ext.grid.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.indexOfTotal(record) + 1;
        return store.indexOf(record) + 1;
    }
});

and,refresh the grid view after insert or delete,like this:

store.insert(0,newRecord);
headerFormGrid.getView().refresh();

Answer 2

Try calling

grid.getView().refresh();

right after you add or remove an item from the grid.