Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9390 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default 4.2 bufferedrenderer with grid.reconfigure makes grid to display old data

    4.2 bufferedrenderer with grid.reconfigure makes grid to display old data


    I have simple grid
    PHP Code:
    {
        
    xtype'grid',
        
    autoScrolltrue,
        
    columnLinestrue,
        
    flex1,
        
    columns: [],
        
    store: new Ext.data.Store({ fields: {} })

    which is reconfigured to change columns when new data loaded
    PHP Code:
            store Ext.create('Ext.data.Store', {
                
    fieldsfields,
                
    datadata,
            });

            
    grid.reconfigure(storecolumns); 
    When I added plugins: 'bufferedrenderer' to grid config to solve performance issues and tested it - I see that sometimes grid is displaying old data (actually - only first column, other columns are empty - may be because new columns set are different in all except first column) - and this happens almost every second time. Tried to play with different plugin options - no changes.

    If click on column header to sort it - grid refreshes with correct data. Thinking that problem is some kind of not cleared cache I tried to call reconfigure twice - this solved problem. But it is real bug.
    Also, this never reproduced for grid with grouping. reproduced too

    PHP Code:
            store Ext.create('Ext.data.Store', {
                
    fieldsfields,
                
    datadata,
            });

            
    grid.reconfigure(storecolumns);
            
    grid.reconfigure(storecolumns); // solves buffered renderer plugin issue 
    *EDITED BY SLEMMON
    Code:
    data1 = {
        children: [{"id":750,"name":750,"type":"children","features":[224,235,202,78,67,244,245,259,283,39,230,79,154,6,232,200,206,284,247,265]},{"id":547,"name":547,"type":"children","features":[224,231,235,202,78,67,244,245,259,283,39,230,79,154,232,200,206,284,265]},{"id":546,"name":546,"type":"children","features":[224,231,235,202,78,126,86,67,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":552,"name":552,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":550,"name":550,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":472,"name":472,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":656,"name":656,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,211,38,39,230,79,154,6,136,209,232,200,206,284,247,265]},{"id":548,"name":548,"type":"children","features":[224,231,235,202,78,126,86,67,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":549,"name":549,"type":"children","features":[224,231,235,202,78,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":644,"name":644,"type":"children","features":[224,231,235,202,78,67,244,245,99,259,283,39,230,79,154,232,200,206,284,265]}],
        features: {"324":{"id":324,"name":324},"224":{"id":224,"name":224},"231":{"id":231,"name":231},"235":{"id":235,"name":235},"202":{"id":202,"name":202},"78":{"id":78,"name":78},"126":{"id":126,"name":126},"86":{"id":86,"name":86},"67":{"id":67,"name":67},"244":{"id":244,"name":244},"245":{"id":245,"name":245},"99":{"id":99,"name":99},"82":{"id":82,"name":82},"87":{"id":87,"name":87},"259":{"id":259,"name":259},"283":{"id":283,"name":283},"211":{"id":211,"name":211},"39":{"id":39,"name":39},"38":{"id":38,"name":38},"230":{"id":230,"name":230},"79":{"id":79,"name":79},"154":{"id":154,"name":154},"6":{"id":6,"name":6},"136":{"id":136,"name":136},"209":{"id":209,"name":209},"232":{"id":232,"name":232},"200":{"id":200,"name":200},"206":{"id":206,"name":206},"284":{"id":284,"name":284},"247":{"id":247,"name":247},"265":{"id":265,"name":265}}
    }
    
    
    data2 = {
        children: [{"id":585,"name":585,"type":"children","features":[224,231,235,202,78,126,86,67,13,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":657,"name":657,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":227,"name":227,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]},{"id":429,"name":429,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":651,"name":651,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":643,"name":643,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":543,"name":543,"type":"children","features":[224,231,235,202,78,67,244,245,283,39,230,79,154,232,200,206,284,265]},{"id":409,"name":409,"type":"children","features":[224,231,235,202,78,67,244,245,259,283,39,230,31,79,154,232,200,206,284,265]},{"id":229,"name":229,"type":"children","features":[224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,37,79,154,232,206,284,247,265]},{"id":698,"name":698,"type":"children","features":[224,231,235,202,78,67,99,82,87,259,283,39,230,37,79,154,232,206,284,247,265]},{"id":219,"name":219,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":223,"name":223,"type":"children","features":[224,231,235,202,78,126,67,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":213,"name":213,"type":"children","features":[224,231,235,202,78,126,42,86,67,53,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":248,"name":248,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]},{"id":689,"name":689,"type":"children","features":[224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":259,"name":259,"type":"children","features":[331,224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]}],
        features: {"331":{"id":331,"name":331},"224":{"id":224,"name":224},"231":{"id":231,"name":231},"235":{"id":235,"name":235},"58":{"id":58,"name":58},"202":{"id":202,"name":202},"78":{"id":78,"name":78},"289":{"id":289,"name":289},"126":{"id":126,"name":126},"42":{"id":42,"name":42},"86":{"id":86,"name":86},"67":{"id":67,"name":67},"13":{"id":13,"name":13},"53":{"id":53,"name":53},"244":{"id":244,"name":244},"245":{"id":245,"name":245},"99":{"id":99,"name":99},"82":{"id":82,"name":82},"87":{"id":87,"name":87},"259":{"id":259,"name":259},"283":{"id":283,"name":283},"39":{"id":39,"name":39},"38":{"id":38,"name":38},"230":{"id":230,"name":230},"37":{"id":37,"name":37},"31":{"id":31,"name":31},"79":{"id":79,"name":79},"154":{"id":154,"name":154},"232":{"id":232,"name":232},"200":{"id":200,"name":200},"206":{"id":206,"name":206},"284":{"id":284,"name":284},"247":{"id":247,"name":247},"265":{"id":265,"name":265}}
    }
    
    
    Ext.create('Ext.grid.Panel', {
        // xtype: 'grid',
        renderTo: Ext.getBody(),
        height: 600,
        plugins: 'bufferedrenderer',
        title: 'Features',
        autoScroll: true,
        columnLines: true,
        flex: 1,
        columns: [],
        store: new Ext.data.Store({ fields: {} }),
        tbar: [
            {
                text: 'Data 1',
                handler: function () {
                    this.up('panel').setData(data1);
                }
            },
            {
                text: 'Data 2',
                handler: function () {
                    this.up('panel').setData(data2);
                }
            }
        ],
        setData: function (data) {
            var i, j, n, b, features, fields, columns, id, name, store;
    
    
            fields = [
                'id',
                {
                    name: 'feature',
                    sortType: 'asUCText'
                }
            ];
    
    
            columns = [
                {
                    header: 'Feature',
                    dataIndex: 'feature',
                    flex: 1,
                    minWidth: 200
                }
            ];
    
    
            for (i in data.children) {
                id = 'children_' + data.children[i].id;
                name = data.children[i].name;
    
    
                fields.push(id);
                columns.push({
                    xtype: 'booleancolumn',
                    text: name,
                    trueText: '√',
                    falseText: '',
                    dataIndex: id,
                    align: 'center'
                });
            }
    
    
            features = [];
            for (i in data.features) {
                n = features.length;
                features[n] = {
                    'id': data.features[i].id,
                    'feature': data.features[i].name
                };
    
    
                for (j in data.children) {
                    b = Ext.Array.indexOf(data.children[j].features, data.features[i].id) !== -1;
                    features[n]['children_' + data.children[j].id] = b;
                }
            }
    
    
            store = Ext.create('Ext.data.Store', {
                fields: fields,
                data: features
            });
            store.sort({ property: 'feature', direction: 'ASC' });
    
    
            this.reconfigure(store, columns);
            // this.reconfigure(store, columns); // fixes Ext4.2.0.663 issue with displaying old data
        }
    });
    Last edited by Qarea; 18 Apr 2013 at 5:17 AM. Reason: Added test case

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I tried whipping up a test case to reproduce the issue. I modified the Buffered Grid Example from the examples page for Ext JS and tried reconfiguring the columns to drive the error, but everything worked as expected for me on FF, Chrome, and Safari.

    Any chance you could give me any more details or a test case I can use to demonstrate the error with?
    Also, is the error you're seeing on all browsers or does it seem to be an issue across browsers?

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default


    No errors in console, issue reproduced in FF10 FF17 FF20 Opera12 IE10

    Attached images
    1 open first object, grid displays correct data
    2 open second object, grid display is broken. You can also see issue with focus manager frame
    3 sorted last grid twice - data displayed correctly

    grid has always "feature" column and set of "entity_{id}" columns, grid is reconfigured for each entity

    if that is not enough I'll try to maker reproducable example
    Attached Images

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    If you have a simple example that would be great. I tried to reproduce the issue just from your description and haven't been able to reproduce it myself.

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default


    Reproduced in simple example:

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Test extjs project</title>
    
            <link href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
    
    <script type="text/javascript">
    data1 = {
        children: [{"id":750,"name":750,"type":"children","features":[224,235,202,78,67,244,245,259,283,39,230,79,154,6,232,200,206,284,247,265]},{"id":547,"name":547,"type":"children","features":[224,231,235,202,78,67,244,245,259,283,39,230,79,154,232,200,206,284,265]},{"id":546,"name":546,"type":"children","features":[224,231,235,202,78,126,86,67,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":552,"name":552,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":550,"name":550,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":472,"name":472,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":656,"name":656,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,211,38,39,230,79,154,6,136,209,232,200,206,284,247,265]},{"id":548,"name":548,"type":"children","features":[224,231,235,202,78,126,86,67,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":549,"name":549,"type":"children","features":[224,231,235,202,78,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":644,"name":644,"type":"children","features":[224,231,235,202,78,67,244,245,99,259,283,39,230,79,154,232,200,206,284,265]}],
        features: {"324":{"id":324,"name":324},"224":{"id":224,"name":224},"231":{"id":231,"name":231},"235":{"id":235,"name":235},"202":{"id":202,"name":202},"78":{"id":78,"name":78},"126":{"id":126,"name":126},"86":{"id":86,"name":86},"67":{"id":67,"name":67},"244":{"id":244,"name":244},"245":{"id":245,"name":245},"99":{"id":99,"name":99},"82":{"id":82,"name":82},"87":{"id":87,"name":87},"259":{"id":259,"name":259},"283":{"id":283,"name":283},"211":{"id":211,"name":211},"39":{"id":39,"name":39},"38":{"id":38,"name":38},"230":{"id":230,"name":230},"79":{"id":79,"name":79},"154":{"id":154,"name":154},"6":{"id":6,"name":6},"136":{"id":136,"name":136},"209":{"id":209,"name":209},"232":{"id":232,"name":232},"200":{"id":200,"name":200},"206":{"id":206,"name":206},"284":{"id":284,"name":284},"247":{"id":247,"name":247},"265":{"id":265,"name":265}}
    }
    
    data2 = {
        children: [{"id":585,"name":585,"type":"children","features":[224,231,235,202,78,126,86,67,13,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":657,"name":657,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":227,"name":227,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]},{"id":429,"name":429,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":651,"name":651,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":643,"name":643,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":543,"name":543,"type":"children","features":[224,231,235,202,78,67,244,245,283,39,230,79,154,232,200,206,284,265]},{"id":409,"name":409,"type":"children","features":[224,231,235,202,78,67,244,245,259,283,39,230,31,79,154,232,200,206,284,265]},{"id":229,"name":229,"type":"children","features":[224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,37,79,154,232,206,284,247,265]},{"id":698,"name":698,"type":"children","features":[224,231,235,202,78,67,99,82,87,259,283,39,230,37,79,154,232,206,284,247,265]},{"id":219,"name":219,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":223,"name":223,"type":"children","features":[224,231,235,202,78,126,67,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":213,"name":213,"type":"children","features":[224,231,235,202,78,126,42,86,67,53,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":248,"name":248,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]},{"id":689,"name":689,"type":"children","features":[224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":259,"name":259,"type":"children","features":[331,224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]}],
        features: {"331":{"id":331,"name":331},"224":{"id":224,"name":224},"231":{"id":231,"name":231},"235":{"id":235,"name":235},"58":{"id":58,"name":58},"202":{"id":202,"name":202},"78":{"id":78,"name":78},"289":{"id":289,"name":289},"126":{"id":126,"name":126},"42":{"id":42,"name":42},"86":{"id":86,"name":86},"67":{"id":67,"name":67},"13":{"id":13,"name":13},"53":{"id":53,"name":53},"244":{"id":244,"name":244},"245":{"id":245,"name":245},"99":{"id":99,"name":99},"82":{"id":82,"name":82},"87":{"id":87,"name":87},"259":{"id":259,"name":259},"283":{"id":283,"name":283},"39":{"id":39,"name":39},"38":{"id":38,"name":38},"230":{"id":230,"name":230},"37":{"id":37,"name":37},"31":{"id":31,"name":31},"79":{"id":79,"name":79},"154":{"id":154,"name":154},"232":{"id":232,"name":232},"200":{"id":200,"name":200},"206":{"id":206,"name":206},"284":{"id":284,"name":284},"247":{"id":247,"name":247},"265":{"id":265,"name":265}}
    }
    
    Ext.onReady(function(){
        // Ext.FocusManager.enable(true);
    
        Ext.create('Ext.grid.Panel', {
            // xtype: 'grid',
            renderTo: Ext.getBody(),
            height: 600,
            plugins: 'bufferedrenderer',
            title: 'Features',
            autoScroll: true,
            columnLines: true,
            flex: 1,
            columns: [],
            store: new Ext.data.Store({ fields: {} }),
            tbar: [
                {
                    text: 'Data 1',
                    handler: function () {
                        this.up('panel').setData(data1);
                    }
                },
                {
                    text: 'Data 2',
                    handler: function () {
                        this.up('panel').setData(data2);
                    }
                }
            ],
            setData: function (data) {
                var i, j, n, b, features, fields, columns, id, name, store;
    
                fields = [
                    'id',
                    {
                        name: 'feature',
                        sortType: 'asUCText'
                    }
                ];
    
                columns = [
                    {
                        header: 'Feature',
                        dataIndex: 'feature',
                        flex: 1,
                        minWidth: 200
                    }
                ];
    
                for (i in data.children) {
                    id = 'children_' + data.children[i].id;
                    name = data.children[i].name;
    
                    fields.push(id);
                    columns.push({
                        xtype: 'booleancolumn',
                        text: name,
                        trueText: '&radic;',
                        falseText: '',
                        dataIndex: id,
                        align: 'center'
                    });
                }
    
                features = [];
                for (i in data.features) {
                    n = features.length;
                    features[n] = {
                        'id': data.features[i].id,
                        'feature': data.features[i].name
                    };
    
                    for (j in data.children) {
                        b = Ext.Array.indexOf(data.children[j].features, data.features[i].id) !== -1;
                        features[n]['children_' + data.children[j].id] = b;
                    }
                }
    
                store = Ext.create('Ext.data.Store', {
                    fields: fields,
                    data: features
                });
                store.sort({ property: 'feature', direction: 'ASC' });
    
                this.reconfigure(store, columns);
                // this.reconfigure(store, columns); // fixes Ext4.2.0.663 issue with displaying old data
            }
        });
    });
    </script>
        </head>
    
        <body>
        </body>
    </html>
    Without bufferedrenderer when you click on each button data successfully loaded and displayed, with plugin - you have to click twice, or uncomment second reconfigure call

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default


    Also, this never reproduced for grid with grouping.
    Actually reproduced too, and causes lots of errors in console
    Error: value is undefined
    Any news on this bug? Is double call to reconfigure a safe fix?

Thread Participants: 1