Results 1 to 5 of 5

Thread: buffering grid delete problem -> ghost records

    This duplicates another bug already reported in our system: EXTJS-7028
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2010
    Location
    Rudolstadt, Germany
    Posts
    52

    Default buffering grid delete problem -> ghost records

    Hello,
    I have the following problem with a buffering grid (ext 4.1.1).

    Deleted records of a buffered grid appear again as soon as the user scrolls up or down.
    It seems to happen only if the "load" function of the store was used.

    here is working example with a proxy of type "localstorage". I discovered the problem first with an ajax proxy.

    http://sandbox.astuteq.de/grid/grid.html
    Video: http://sandbox.astuteq.de/grid/grid.mp4

    How to reproduce (see the video):
    1. click "create records" -> sample data is generated and added to the store
    2. select one or more rows and click "remove", do some scrolling -> everything works as expected, the row number column gets updated properly
    3. click "reload"
    4. select one or more rows, click "remove" -> row numbers are no longer properly updated
    5. do some scrolling, scroll back to the position where the record was deleted -> records re-appeard as "ghost-records"
    6. click reload -> the grid shows the right content

    Please try the example and tell me what you think. The complete code is within the grid.html source.

    BTW: It seems that "removeAll" does not work with "localstorage" proxy, thats the reason for my "special" "delete 100 records" function...

    Thanks,
    Stefan

    Code:

    Code:
    Ext.define('Employee', {
        extend : 'Ext.data.Model',
        fields : [
            {name : 'rating', type : 'int'},
            {name : 'salary', type : 'float'},
            {name : 'name'}
        ],
        proxy  : {
            type : 'localstorage',
            id   : 'local-store'
        }
    });
    
    function createFakeData(count, mystore) {
        var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
            lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
            ratings = [1, 2, 3, 4, 5],
            salaries = [100, 400, 900, 1500, 1000000];
    
        for (var i = 0; i < count; i++) {
            var ratingId = Math.floor(Math.random() * ratings.length),
                salaryId = Math.floor(Math.random() * salaries.length),
                firstNameId = Math.floor(Math.random() * firstNames.length),
                lastNameId = Math.floor(Math.random() * lastNames.length),
    
                rating = ratings[ratingId],
                salary = salaries[salaryId],
                name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
    
            mystore.add({
                rating : rating,
                salary : salary,
                name   : name
            });
    
            store.sync();
    
        }
    }
    
    // Create the Data Store.
    // Because it is buffered, the automatic load will be directed
    // through the prefetch mechanism, and be read through the page cache
    var store = Ext.create('Ext.data.Store', {
        id       : 'store',
        buffered : true,
        pageSize : 50,
        model    : 'Employee',
        autoSync : false,
        autoLoad : true
    
    });
    
    var grid = Ext.create('Ext.grid.Panel', {
        width      : 700,
        id         : 'grid',
        tbar       : {
            items : [
                {
                    text    : 'remove',
                    handler : function (b) {
                        store.remove(grid.getSelectionModel().getSelection());
                        store.sync();
                    }
                },
                {
                    text    : 'reload',
                    handler : function (b) {
                        store.load();
                    }
                },
                {
                    xtype : 'tbfill'
                },
                {
                    text    : 'remove 100 records',
                    handler : function (b) {
    
                        store.remove(store.getRange(0, 100));
                        store.sync();
    
                    }
                },
                {
                    text    : 'create 200 records',
                    handler : function (b) {
                        createFakeData(200, store);
                    }
                }
    
            ]
        },
        height     : 500,
        title      : 'Bufffered Grid of random records',
        store      : store,
        loadMask   : false,
        selModel   : {
            singleSelect : false,
            pruneRemoved : false
        },
        viewConfig : {
            trackOver : false
        },
        // grid columns
        columns    : [
            {
                xtype    : 'rownumberer',
                width    : 40,
                sortable : false
            },
            {
                text      : 'Name',
                flex      : 1,
                sortable  : true,
                dataIndex : 'name'
            },
            {
                text      : 'Rating',
                width     : 125,
                sortable  : true,
                dataIndex : 'rating'
            },
            {
                text      : 'Salary',
                width     : 125,
                sortable  : true,
                dataIndex : 'salary',
                align     : 'right',
                renderer  : Ext.util.Format.usMoney
            }
        ],
        renderTo   : Ext.getBody()
    });
    Last edited by mitchellsimoens; 20 Aug 2012 at 7:12 AM. Reason: added code

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,392

    Default

    Thanks for the report.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,240

    Default

    Dupe of: http://www.sencha.com/forum/showthread.php?237606

    The underlying causes are the same.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2010
    Location
    Rudolstadt, Germany
    Posts
    52

    Default

    Will this bug be addressed in the next bugfix release? When can we expect the next bugfix release?

    Thanks
    Stefan

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default

    Was this ever resolved? The DUP bug is still open, 2 years after being reported.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •