This duplicates another bug already reported in our system: EXTJS-11048
  1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    236
    Vote Rating
    3
    ypandey is on a distinguished road

      0  

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

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


    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:
    Code:
    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.

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,831
    Vote Rating
    72
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


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

  3. #3
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    975
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Probably, it duplicates this one (reported in October 2012).
    http://www.sencha.com/forum/showthread.php?245293
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    236
    Vote Rating
    3
    ypandey is on a distinguished road

      0  

    Arrow workaround using renderer's row index

    workaround using renderer's row index


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