REQUIRED INFORMATION
Ext version tested:
  • Ext 4.2.0.489
Browser versions tested against:
  • IE8
  • Google Chrome 25
DOCTYPE tested against:Description:
  • When the data is loaded using loadData/reconfigure function, data is not loaded properly.
Steps to reproduce the problem:
  • 1. Select a row on the first grid, to reload the second grid
    2. Open second grid.
The result that was expected:
  • 1. Data is reloaded to the grid.
The result that occurs instead:
  • 1. Only 100 rows are loaded, and clicking the grid has no response.
Test Case:
HTML Code
Code:
<html>
<head>
<title>Buffered Renderer Grid LoadData/Reconfigure does not work</title>
<link rel="stylesheet" type="text/css" href="../shared/example.css" />


    <!-- GC -->


<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="buffered-renderer-bug.js"></script>
<style type="text/css">
    .emptyText {
        margin: 5px;
    }
</style>
</head>
<body>
    <h1>Buffered Renderer Grid LoadData/Reconfigure Bug</h1>
    <p>
        When the data is loaded using loadData/reconfigure function, data is not loaded properly. 
    </p>
    <p>
        To reproduce:
        1. Select a row on the first grid.
        2. Open second grid, only 100 rows are loaded, and clicking the grid has no response. 
    </p>
    <p>Note that the js is not minified so it is readable. See <a href="buffered-renderer-bug.js">buffered-renderer-bug.js</a>.</p>
</body>
<div id="button-container"></div>
<p></p>
<div id="grid-container"></div>
</html>
ExtJS Code
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 store1 = 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 store2 = Ext.create('Ext.data.Store', {
        id: 'store',
        model: 'Employee',
        proxy: {
            type: 'memory'
        }
    });


    var grid2 = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        title: 'Bufffered Grid of 2,500 random records',
        store: store2,
        loadMask: true,
        plugins: 'bufferedrenderer',
        selModel: {
            pruneRemoved: false
        },
        selType: 'checkboxmodel',
        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: store2.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()
    }); 


    var grid1 = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        title: 'Bufffered Grid of 5,000 random records',
        store: store1,
        loadMask: true,
        plugins: 'bufferedrenderer',
        selModel: {
            pruneRemoved: false
        },
        selType: 'checkboxmodel',
        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: store1.getTotalCount(),
            allowDecimals: false,
            itemId: 'gotoLine',
            enableKeyEvents: true,
            listeners: {
                specialkey: function(field, e){
                    if (e.getKey() === e.ENTER) {
                        jumpToRow();
                    }
                }
            }
        }, {
            text: 'Go',
            handler: jumpToRow
        }],
        listeners:{
            scope:this,
            selectionchange:function(){
                //Bug 1 - load data does not work.
                //grid2.getStore().loadData(createFakeData(2500));


                //Bug 2 - reconfigure data does not work
                var store3 = Ext.create('Ext.data.Store', {
                    id: 'store',
                    data: createFakeData(3000),
                    model: 'Employee',
                    proxy: {
                        type: 'memory'
                    }
                });


                grid2.reconfigure(store3);
                //store3.load();
                //store3.loadPage(1);
            }
        }
    });


    var tabPanel = Ext.create('Ext.tab.Panel', {   
         width: 800,
        height: 400,
        renderTo: Ext.getBody(),
        items: [grid1,grid2]
    });
    
    store2.loadData(createFakeData(2500));
});

HELPFUL INFORMATION
Screenshot or Video:
  • attached
See this URL for live test case: http://Debugging already done:
  • none
Possible fix:
  • not provided
Additional CSS used:
  • only default ext-all.css
  • custom css (include details)
Operating System:
  • Windows 7 Pro