Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9050 in a recent build.
  1. #1
    Sencha User
    Join Date
    Nov 2009
    Posts
    7
    Vote Rating
    0
    mmayer37@gmail.com is on a distinguished road

      0  

    Default Grouping feature breaks bufferedrendere scrollto function (and possible fix)

    Grouping feature breaks bufferedrendere scrollto function (and possible fix)


    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.2.0.489


    Browser versions tested against:
    • Chrome 25
    • IE9


    DOCTYPE tested against:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


    Description:
    • Modified the buffer-grid.js example to include the grid grouping feature. This breaks the ability to use the bufferedRenderer.scrollTo function


    Steps to reproduce the problem:
    • Modify the buffer grid example as follows.
    • Type 400 in the 'jump to row' textfield and click go.
    Code:
           enableLocking: false,
           plugins: [
    			{
    				ptype: 'bufferedrenderer',
    				variablerowheight: true
    			}
    			
    		],
    		features: [{
                ftype: 'groupingsummary',
                groupHeaderTpl: '{name}'
            }],





    The result that was expected:
    • Should scroll to row 400.


    The result that occurs instead:
    • Does nothing.


    Test Case:
    Full working js (when pasted into examples/buffer-grid.js)
    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 grid = Ext.create('Ext.grid.Panel', {
            width: 700,
            height: 500,
            title: 'Bufffered Grid of 5,000 random records',
            store: store,
            loadMask: true,
    		enableLocking: false,
            plugins: [
    			{
    				ptype: 'bufferedrenderer',
    				variablerowheight: true
    			}
    		],
    		features: [{
                ftype: 'groupingsummary',
                groupHeaderTpl: '{name}'
            }],
            selModel: {
                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
            }],
            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
            }],
            renderTo: Ext.getBody()
        });
    });





    HELPFUL INFORMATION








    Debugging already done:
    • The GroupStore does not support callback which is used by bufferredrenderer plugin


    Possible fix:
    • This is one possible fix (code copied from another store, forget where)
    Code:
    
    Ext.override(Ext.grid.feature.GroupStore, 
    {
        getRange: function(start, end, options) {
            var result = this.data.getRange(start, end);
    
    
            // Someone *may* use the callback interface to process their results even if the store is not buffered and always synchronous
            if (options && options.callback)
            {
                options.callback.call(options.scope || this, result, start, end, options)
            }
        
            return result;        
        }
    
    
    });



    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • Windows 7

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

Thread Participants: 1

Tags for this Thread