This duplicates another bug already reported in our system: EXTJS-11048
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    242
    Vote Rating
    7
    ypandey will become famous soon enough

      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
    5,528
    Vote Rating
    115
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      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
    983
    Vote Rating
    116
    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
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Launching Soon!
    --------------------------------------------------

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    242
    Vote Rating
    7
    ypandey will become famous soon enough

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