After insert/remove record, grid refresh not resetting rownumberer column values

[ypandey]

Ext version tested:

• 
  ExtJS 4.2.1

Description:
After inserting/removing a record, the rownumber value doesn't change for existing records. I read somewhere refreshing grid's view will reset the values.
But it doesn't seems to work for existing records in the store. I mean the values reset only for records newly added in store.

Test Case:

var generateData = function (count) {
    var totalRecords = [], i;
    for (i=0; i < count; i++) {
        totalRecords[i] = {
            name: 'name',
            description: 'description'
        };
    };
    return { data: totalRecords };
};
Ext.define('MyApp.model.SomeModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'description',
        type: 'string'
    }, 'id']
});
Ext.define("MyApp.store.SomeStore", {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.SomeModel',
    autoDestroy: true,
    pageSize: 75,
    autoLoad: false,
    //sorters: [{
    //    property: 'name',
    //    direction: 'ASC'
    //}],
    data: generateData(10),
    proxy: {
        type: 'memory',
        //url: 'data.json',// I use struts action to get 2000 records
        //data: generateData(2000),
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});




var someStore = Ext.create('MyApp.store.SomeStore', {
    storeId: 'SomeStore'
});




Ext.widget('viewport', {
    layout: 'fit',
    items: [{
        xtype: 'grid',
        itemId: 'maingrid',
        store: 'SomeStore',
        loadMask: true,
        tbar: [{
            text: 'Insert at ',
            handler: function (btn) {
                var grid = btn.up('gridpanel'),
                    store = grid.getStore(),
                    inserted;
                inserted = store.insert( btn.up('gridpanel').down('#Position').getValue()-1, {
                    name: 'New Name',
                    description: 'New Description'
                })[0];
                grid.getView().refresh();
                grid.getView().select(inserted);
            }
        },{
            xtype: 'numberfield',
            itemId: 'Position',
            minValue: 1,
            value: 1
        }],
        viewConfig: {
            emptyText: 'No Records',
            deferEmptyText: true,
            trackOver: false
        },
        autoScroll: true,
        border: 0,
        selModel: {
            selType: 'rowmodel',
            pruneRemoved: false,
            mode: 'MULTI'
        },
        columnLines: true,
        columns: [{
            xtype:'rownumberer'
        }, {
            text: 'Name',
            flex: 2,
            minWidth: 120,
            dataIndex: 'name'
        }, {
            text: 'Description',
            flex: 3,
            minWidth: 120,
            dataIndex: 'description',
            renderer: function (value, metaData, record,
                rowIdx, colIdx, store) {
                metaData.tdAttr = 'data-qtip="' + value + '"';
                return value;
            }
        }]
    }]
});

Steps to Reproduce:
1) Insert at 4
2) Insert at 2
The result that occurs instead:
You will find row numbers are not coming properly and previously added record is resetting to proper row value.

[Gary Schlosberg]

Thanks for the report! I have opened a bug in our bug tracker.

[Daniil]

Probably, it duplicates this one (reported in October 2012).
http://www.sencha.com/forum/showthread.php?245293

[ypandey]

var generateData = function (count) {
    var totalRecords = [], i;
    for (i=0; i < count; i++) {
        totalRecords[i] = {
            name: 'name',
            description: 'description'
        };
    };
    return { data: totalRecords };
};
Ext.define('MyApp.model.SomeModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'description',
        type: 'string'
    }, 'id']
});
Ext.define("MyApp.store.SomeStore", {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.SomeModel',
    autoDestroy: true,
    pageSize: 75,
    autoLoad: false,
    //sorters: [{
    //    property: 'name',
    //    direction: 'ASC'
    //}],
    data: generateData(10),
    proxy: {
        type: 'memory',
        //url: 'data.json',// I use struts action to get 2000 records
        //data: generateData(2000),
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

var someStore = Ext.create('MyApp.store.SomeStore', {
    storeId: 'SomeStore'
});

Ext.widget('viewport', {
    layout: 'fit',
    items: [{
        xtype: 'grid',
        itemId: 'maingrid',
        store: 'SomeStore',
        loadMask: true,
        tbar: [{
            text: 'Insert at ',
            handler: function (btn) {
                var grid = btn.up('gridpanel'),
                    store = grid.getStore(),
                    inserted;
                inserted = store.insert( btn.up('gridpanel').down('#Position').getValue()-1, {
                    name: 'New Name',
                    description: 'New Description'
                })[0];
                grid.getView().refresh();
                grid.getView().select(inserted);
            }
        },{
            xtype: 'numberfield',
            itemId: 'Position',
            minValue: 1,
            value: 1
        }, '->', {
            text: 'Remove at ',
            handler: function (btn) {
                var grid = btn.up('gridpanel'),
                    store = grid.getStore(),
                    removed;
                store.removeAt( btn.up('gridpanel').down('#removePosition').getValue()-1);                store.sort();// it calls rows renderers.
                grid.getView().refresh();
            }
        },{
            xtype: 'numberfield',
            itemId: 'removePosition',
            minValue: 1,
            value: 1
        }],
        viewConfig: {
            emptyText: 'No Records',
            deferEmptyText: true,
            trackOver: false
        },
        autoScroll: true,
        border: 0,
        selModel: {
            selType: 'rowmodel',
            pruneRemoved: false,
            mode: 'MULTI'
        },
        columnLines: true,
        columns: [{
            xtype:'rownumberer',
            renderer: function (v, p, record, rowIndex) {
                    //if (this.rowspan) {
                    //    p.cellAttr = 'rowspan="' + this.rowspan + '"';
                    //}
                    return rowIndex + 1;
            }
        }, {
            text: 'Name',
            flex: 2,
            minWidth: 120,
            dataIndex: 'name'
        }, {
            text: 'Description',
            flex: 3,
            minWidth: 120,
            dataIndex: 'description',
            renderer: function (value, metaData, record,
                rowIdx, colIdx, store) {
                metaData.tdAttr = 'data-qtip="' + value + '"';
                return value;
            }
        }]
    }]
});