BufferedRenderer and RowExapander combined have rendering issues after scrolling

**mmayer37@gmail.com** · 8 Mar 2013 12:41 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:

Adding rowexpander plugin to the buffer-grid.js example. After expanding some rows, scrolling results in some misaligned rows/columns.

Steps to reproduce the problem:

Modify examples/grid/buffer-grid.js as shown below in code. expand rows 4 and 6 (or just any one row), scroll down and then back up. The rendering of some rows/columns is not correct (see attached image)

The result that was expected:

The first two columns should render the same before & after the scrolling.

The result that occurs instead:

The first two columns are not expanded.

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 grid = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        title: 'Bufffered Grid of 5,000 random records',
        store: store,
        loadMask: true,
        enableLocking: true,
        plugins: [
            {
                ptype: 'bufferedrenderer',
                variablerowheight: true
            }
            ,
             {
                  ptype: 'rowexpander',
                  rowBodyTpl : new Ext.XTemplate(
                        '<p><b>Name:</b> {name}</p>',
                        '<p><b>Salary:</b> {salary:this.formatChange}</p><br>',
                        '<p><b>Rank:</b> {rating}</p>',
                    {
                        formatChange: function(v){
                            var color = v >= 20000 ? 'green' : 'red';
                            return '<span style="color: ' + color + ';">' + Ext.util.Format.usMoney(v) + '</span>';
                        }
                    })
              }
        ],
        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

Screenshot or Video:

attached

Debugging already done:

Might have something to do with lockable columns. Once this is fixed (http://www.sencha.com/forum/showthre...ocking-to-work) that might change this behavior.

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Windows 7

**mitchellsimoens** · 8 Mar 2013 2:35 PM

Thanks for the report.

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

As a note, in my current product, we have a grid with grouping and row expander. We would like to replace paging with the bufferedrenderer. If you could add and test an example grid with all three of those enabled, that would be awesome.

Basically add the grouping feature and the row expander plugin to your current buffered grid example. I would love for all three of those to work together and hope that is your intent.

**evant** · 8 Mar 2013 3:39 PM

In this case the problem is caused by using locking, if you turn that off your test case runs ok. Locking needs to do extra work two synchronize between the 2 sides.

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

Thanks evant, you are correct. I applied this override to my example (http://www.sencha.com/forum/showthre...ocking-to-work) and disabled locking and it looks better. That fix will work for me.

BufferedRenderer and RowExapander combined have rendering issues after scrolling

Thread Tools

Search Thread

Display

BufferedRenderer and RowExapander combined have rendering issues after scrolling

BufferedRenderer and RowExapander combined have rendering issues after scrolling

Would like to see example with grouping, row expander, and bufferedrenderer

Would like to see example with grouping, row expander, and bufferedrenderer

Tags for this Thread