You found a bug! We've classified it as EXTJS-8967 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    1
    ramirez is on a distinguished road

      1  

    Default Buffered Renderer reconfigure,loadData functions not working properly

    Buffered Renderer reconfigure,loadData functions not working properly


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,203
    Vote Rating
    856
    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


    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?
    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 Premium Member
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    1
    ramirez is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I think you need to use loadRawData

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    1
    ramirez is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

Thread Participants: 2