Results 1 to 5 of 5

Thread: BufferedRenderer and RowExapander combined have rendering issues after scrolling

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Nov 2009
    Posts
    7
    Vote Rating
    0
      0  

    Default 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 Attached Images

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,318
    Vote Rating
    1291
      0  

    Default

    Thanks for the report.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
      0  

    Default 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
    18,369
    Vote Rating
    858
      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
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •