Buffered Renderer reconfigure,loadData functions not working properly

**ramirez** · 26 Feb 2013 1:25 AM

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

**mitchellsimoens** · 28 Feb 2013 10:31 AM

So I used your code, selected a row in the first grid, switched to the second grid to see if there were more than 100 rows and there was so not sure if I'm missing a step?

**ramirez** · 28 Feb 2013 5:09 PM

Sorry, can you try these steps instead? The bug happens after grid is rendered, and then reloaded again.
Test 1
1. Open the second grid,
2. Select a row on the first grid, to reload the second grid
3. Open second grid.

Test 2
1. Select a row on the first grid, to reload the second grid
2. Open the second grid.
3. Select a new row on the first grid again, to reload the second grid.

**Animal** · 4 Mar 2013 1:58 AM

I think you need to use loadRawData

**ramirez** · 4 Mar 2013 6:20 PM

Ok, I just tried using store.loadRawData and the same problem occur.

**Animal** · 4 Mar 2013 9:51 PM

Must be an unreleased fix. Because your code definitely works here.

Buffered Renderer reconfigure,loadData functions not working properly

Thread Tools

Search Thread

Display

Buffered Renderer reconfigure,loadData functions not working properly

Buffered Renderer reconfigure,loadData functions not working properly