PDA

View Full Version : [FIXED] 4.2 Buffered renderer with grouping causes grid to go blank (working example)



jkyoutsey
3 Apr 2013, 3:36 PM
Steps to reproduce:
Group on col1.
Click Expand All.
Scroll way down.
Click on Collapse All.
See that the grid is now still scrolled way down and if you scroll up it will be blank.


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')]
});
});

mitchellsimoens
5 Apr 2013, 6:48 AM
Thanks for the report! I have opened a bug in our bug tracker.

jkyoutsey
5 Apr 2013, 7:01 AM
Thanks, Mitch!

andrewx
24 Apr 2013, 12:48 PM
Any workarounds available for this? I am facing the same issue.

Thanks

hepra
23 May 2013, 6:18 AM
Same here. Any workarounds?