This issue duplicates another issue.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    1
    dagardner is on a distinguished road

      1  

    Default ExtJS 4.2 Buffered Grid and Filtering

    ExtJS 4.2 Buffered Grid and Filtering


    Ext version tested:
    4.2
    Browser versions tested against:
    Firefox 10.0.12 (Linux),
    Chrome 19.0.1084.46 (Linux)
    Description:
    The bug I have run into occurs when applying a filter to a buffered grid with several rows (larger than the page size), and the filtered result is rather small (in testing 2 rows).
    Steps to reproduce the problem:
    1) Load a large buffered grid, the Buffered Scrolling example works just fine for this (http://docs.sencha.com/ext-js/4-2/#!/example/grid/buffer-grid.html)

    2) Scroll down all the way to the bottom.

    3) Apply a filter against the store:
    var filter = function (rec) {
    return rec.get('id') == 'rec-1';
    };

    store.clearFilter(true);
    store.filter([{filterFn:filter}]);

    4) Scroll back up the grid is empty, although there should be one row

    5) Calling store.getCount() shows that indeed there is actually a single row

    6) Calling store.clearFilter() has no effect at this point.

    If instead I didn't scroll all the way to the bottom, then the above works as expected. Attached is a modified version of the buffer-grid example.
    Test Case:
    Code:
    Ext.Loader.setConfig({enabled: true});
    
    Ext.Loader.setPath('Ext.ux', '../ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.plugin.BufferedRenderer'
    ]);
    
    Ext.define('Employee', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'rating', type: 'int'},
           {name: 'salary', type: 'float'},
           {name: 'name'}
        ]
    });
    
    Ext.onReady(function(){
        /**
         * Returns an array of fake data
         * @param {Number} count The number of fake rows to create data for
         * @return {Array} The fake record data, suitable for usage with an ArrayReader
         */
        function createFakeData(count) {
            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];
    
            var data = [];
            for (var i = 0; i < (count || 25); 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]);
    
                data.push({
                    id: 'rec-' + i,
                    rating: rating,
                    salary: salary,
                    name: name
                });
            }
            return data;
        }
    
        // 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',
            data: createFakeData(5000),
            model: 'Employee',
            proxy: {
                type: 'memory'
            }
        });
        
        var jumpToRow = function(){
            var fld = grid.down('#gotoLine');
            if (fld.isValid()) {
                grid.view.bufferedRenderer.scrollTo(fld.getValue() - 1, true);
            }    
        };
    
        var bugTest = function() {
            var filter = function (rec) {
                return rec.get('id') == 'rec-1';
            };
    
            store.clearFilter(true);
            store.filter([{filterFn:filter}]);
        };
    
    
        var getCount = function() {
            console.log(store.getCount());
        };
    
        var clearFilter = function() {
            store.clearFilter();
        }
    
        var grid = Ext.create('Ext.grid.Panel', {
            width: 700,
            height: 500,
            title: 'Bufffered Grid of 5,000 random records',
            store: store,
            loadMask: true,
            plugins: 'bufferedrenderer',
            selModel: {
                pruneRemoved: false
            },
            viewConfig: {
                trackOver: false
            },
            features: [{
                ftype: 'groupingsummary',
                groupHeaderTpl: 'All staff on {name:usMoney}',
                showSummaryRow: false
            }],
            // grid columns
            columns:[{
                xtype: 'rownumberer',
                width: 40,
                sortable: false
            },{
                text: 'Name',
                flex:1 ,
                sortable: true,
                dataIndex: 'name',
                groupable: false
            },{
                text: 'Rating',
                width: 125,
                sortable: true,
                dataIndex: 'rating',
                groupable: false
            },{
                text: 'Salary',
                width: 125,
                sortable: true,
                dataIndex: 'salary',
                align: 'right',
                renderer: Ext.util.Format.usMoney
            }],
            bbar: [{
                labelWidth: 70,
                fieldLabel: 'Jump to row',
                xtype: 'numberfield',
                minValue: 1,
                maxValue: store.getTotalCount(),
                allowDecimals: false,
                itemId: 'gotoLine',
                enableKeyEvents: true,
                listeners: {
                    specialkey: function(field, e){
                        if (e.getKey() === e.ENTER) {
                            jumpToRow();
                        }
                    }
                }
            }, {
                text: 'Go',
                handler: jumpToRow
            }, {
                text: 'Bug Test',
                handler: bugTest
            }, {
                text: 'Clear filter',
                handler: clearFilter
            },{
                text: 'Get Count',
                handler: getCount 
            }
        ],
            renderTo: Ext.getBody()
        });
    });

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,159
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    1
    dagardner is on a distinguished road

      0  

    Default duplicate?

    duplicate?


    Are you sure it is a duplicate of EXTJSIV-9211? In that example the user is using a buffered store, where I am using a local memory store. Also my issue behaves differently depending on if I have scrolled past pageSize number of rows in the grid before applying the filter operation.

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    1
    Vote Rating
    0
    mjackels is on a distinguished road

      0  

    Default Please check again

    Please check again


    This does not sound like the same issue as EXTJSIV-9211. Can we get someone to take another look? Are you saying they have the same root cause?

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,159
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Whoops, I referred to the wrong ticket. Rather: http://www.sencha.com/forum/showthread.php?254853
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    1
    dagardner is on a distinguished road

      0  

    Default


    Ahhh yes thank you that is exactly the same problem that I am having.

Thread Participants: 2