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
    Vote Rating

    Default BufferedRenderer and RowExapander combined have rendering issues after scrolling


    Ext version tested:
    • Ext

    Browser versions tested against:
    • Chrome (25)
    • IE9

    DOCTYPE tested against:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">

    • 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:

    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', '../ux/');
    Ext.define('Employee', {
        extend: '',
        fields: [
           {name: 'rating', type: 'int'},
           {name: 'salary', type: 'float'},
           {name: 'name'}
         * 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]);
                    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('', {
            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
                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) {
            }, {
                text: 'Go',
                handler: jumpToRow
            renderTo: Ext.getBody()


    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
    Gainesville, FL
    Vote Rating


    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

    Think my support is good? Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services

    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
    Vote Rating

    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
    Sydney, Australia
    Vote Rating


    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
    Twitter - @evantrimboli

  5. #5
    Sencha User
    Join Date
    Nov 2009
    Vote Rating


    Thanks evant, you are correct. I applied this override to my example ( 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