View Full Version : Unable to maintain grid scroll position between tabs in tabpanel. Ext 4.1.0

25 May 2012, 11:43 AM
I have found similar issues to this on the forums but have not found a finalized answer, especially for 4.1.

If you have a tab panel with a grid within one of the tabs, the scrollbar position is not maintained after switching tabs.


name: 'HelloExt',
launch: function() {
var dummyData = [];
for(var i=0; i<100; i++){
dummyData.push({'a': 'this is', 'b': 'a test'});

Ext.create('Ext.container.Viewport', {
layout: 'fit',
xtype: 'tabpanel',
items: [{
title: 'Tab A',
xtype: 'grid',
store: {
fields: ['a', 'b'],
data: dummyData
columns: [
{header: 'A', dataIndex: 'a'},
{header: 'B', dataIndex: 'b', flex: 1}
title: 'Tab B'

If you scroll down in Tab A, then switch to Tab B and back, the scroll position is lost. This is even more of an issue if the grid is configured to use infinite scrolling because the data does not refresh and the grid appears blank.

I have attempted adding the following to the grid config, but there was no effect.

viewConfig: {
preserveScrollOnRefresh: true

25 May 2012, 2:07 PM
You will need to preserve the position and then restore it when you return

as for preserveScrollOnRefresh, it works on view refresh


28 May 2012, 3:18 PM
Thanks scott, so is this actually by design or is it a bug? This was certainly not the behavior in 3.x and in my opinion, switching between tabs should not change anything in the tabs' contents.

5 Jun 2012, 6:14 AM
Ok, it seems that hideMode: 'offsets' fixes the issue. Apparently the default hideMode of 'display' resets all the scrollbars.