Results 1 to 5 of 5

Thread: 4.2 Buffered renderer with grouping causes grid to go blank (working example)

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9377 in 4.2.1.883.
  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    78
    Vote Rating
    9
      0  

    Exclamation 4.2 Buffered renderer with grouping causes grid to go blank (working example)

    Steps to reproduce:
    1. Group on col1.
    2. Click Expand All.
    3. Scroll way down.
    4. Click on Collapse All.
    5. See that the grid is now still scrolled way down and if you scroll up it will be blank.
    Code:
    Ext.onReady(function () {
       var data = {
          "data" : [
             { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" }, { "col1" : "1", "col2" : "lorem" },
             { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" }, { "col1" : "2", "col2" : "lorem" },
             { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" }, { "col1" : "3", "col2" : "lorem" },
             { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" }, { "col1" : "4", "col2" : "lorem" },
             { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" }, { "col1" : "5", "col2" : "lorem" },
             { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }, { "col1" : "6", "col2" : "lorem" }
          ]
       };
    
    
       Ext.define('myModel', {
             extend : 'Ext.data.Model',
             fields : ['col1', 'col2'],
          });
    
    
       var store = Ext.create('Ext.data.Store', {
             storeId: 'theStore',
             model : 'myModel',
             autoLoad : true,
             data : data,
             proxy : {
                type : 'memory',
                reader : {
                   type : 'json',
                   root : 'data'
                }
             }
          });
    
    
       Ext.require(['Ext.grid.plugin.BufferedRenderer']);
       
       Ext.define('My.view.Grid', {
          extend :'Ext.grid.Panel',
          plugins : 'bufferedrenderer',
          height : 250,
          store : store,
          features : [{
                id : 'groupingFeature',
                ftype : 'grouping'
             }
          ],
          
          columns : [{
                text : 'col1',
                dataIndex : 'col1'
             }, {
                text : 'col2',
                dataIndex : 'col2'
             }
          ],
          
          /*
           * This is mainly needed due to the ExtJS bug where startCollapsed doesn't
           * work. This forces the collapse whenever grouping changes. It also
           * enables/disables the toggle for expansion of groups.
           */
          groupChange : function (store, groupers, e) {
             var me = this;
             var btn = Ext.getCmp('toggleGroupExpansionButton');
             if (me.store.isGrouped()) {
                btn.enable();
                btn.setText('Expand All');
                // Collapse won't work without the setTimeout???
                setTimeout(function () {
                   me.collapseAllGroups();
                }, 0);
             } else {
                btn.disable();
             }
          },
    
    
          expandAllGroups : function () {
             Ext.getCmp('toggleGroupExpansionButton').setText('Collapse All');
             this.getView().getFeature('groupingFeature').expandAll();
          },
    
    
          collapseAllGroups : function () {
             var btn = Ext.getCmp('toggleGroupExpansionButton');
             if (btn) {
                btn.setText('Expand All');
             }
    
    
             this.getView().getFeature('groupingFeature').expandAll();
             this.getView().getFeature('groupingFeature').collapseAll();
          },
    
    
          initComponent : function () {
             this.store.addListener('groupchange', this.groupChange, this);
             var me = this;
             this.dockedItems = [{
                   xtype : 'toolbar',
                   dock : 'bottom',
                   items : [{
                         xtype : 'button',
                         id : 'toggleGroupExpansionButton',
                         text : 'Expand All',
                         handler : function () {
                            var btn = Ext.getCmp('toggleGroupExpansionButton');
                            if (btn.text == 'Expand All') {
                               me.expandAllGroups();
                            } else {
                               me.collapseAllGroups();
                            }
                         }
                      }
                   ]
                }
             ]; 
             
             this.callParent(arguments);
          }
       });
       
       Ext.create('Ext.container.Container', {
          renderTo : Ext.getBody(),
          layout : {
             type:'vbox', 
             align:'stretch'
             },
          items : [Ext.create('My.view.Grid')]
       });
    });

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

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

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    78
    Vote Rating
    9
      0  

    Default

    Thanks, Mitch!

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    46
    Vote Rating
    5
      0  

    Default

    Any workarounds available for this? I am facing the same issue.

    Thanks

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Same here. Any workarounds?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •