Grouping feature breaks bufferedrendere scrollto function (and possible fix)

**mmayer37@gmail.com** · 8 Mar 2013 3:18 PM

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

**Animal** · 10 Mar 2013 4:57 PM

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

Grouping feature breaks bufferedrendere scrollto function (and possible fix)

Thread Tools

Search Thread

Display

Grouping feature breaks bufferedrendere scrollto function (and possible fix)

Grouping feature breaks bufferedrendere scrollto function (and possible fix)

Tags for this Thread