Hybrid View

    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
    36,756
    Vote Rating
    828
    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,499
    Vote Rating
    47
    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,499
    Vote Rating
    47
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi