You found a bug! We've classified it as EXTJS-9044 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Nov 2009
    Posts
    7
    Vote Rating
    0
    mmayer37@gmail.com is on a distinguished road

      0  

    Default BufferedRenderer and RowExapander combined have rendering issues after scrolling

    BufferedRenderer and RowExapander combined have rendering issues after scrolling


    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:Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Windows 7
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2009
    Posts
    7
    Vote Rating
    0
    mmayer37@gmail.com is on a distinguished road

      0  

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

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


    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.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,000
    Vote Rating
    650
    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


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Nov 2009
    Posts
    7
    Vote Rating
    0
    mmayer37@gmail.com is on a distinguished road

      0  

    Default


    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.