View Full Version : Panel scrolls to top when child components are dynamically shown/hidden

20 Jan 2014, 11:08 AM
I have a card layout in which each card is an Ext.form.Panel with overflowY: true. Many of these panels contain a series of yes/no questions (implemented as radiogroups), where a "yes" answer causes a nested container to be shown and a "no" answer causes that nested container to be hidden. In many cases, the combined height of all these nested containers is considerably greater than the fixed height of the card panel itself; hence the need for the vertical scrollbar.

The problem I'm having is that in many cases, selecting a value for one of these yes/no radiogroups will cause the panel to scroll all the way back to the top. On some panels, it seems like I can avoid this irritating behavior by explicitly setting a fixed height for each container that can be shown/hidden; when I do that, selecting a value from a radiogroup hides/shows the relevant container, and the scrollbar adjusts its size accordingly, but the scroll position doesn't change. However, on other panels this doesn't seem to help, and on still others, it doesn't even seem to be necessary -- the autoscrolling behavior never happens even if none of the nested containers have fixed heights

I attempted to construct a concise example I could attach to this question, but I've had no luck creating a simple small panel that suffers from this behavior. Are there any general rules of thumb I should be following when constructing my panels that will ensure the scrolling behavior will work properly as components are shown/hidden?

Gary Schlosberg
20 Jan 2014, 12:21 PM
I don't know of any -- it should scroll when it needs to. With which version of ExtJS are you seeing this issue? Is it only with radio groups?

20 Jan 2014, 3:56 PM
I know this behavior also - I did it with a an extra container around my Form and gave it the overflowY: true

21 Jan 2014, 6:43 AM
I noticed a typo in my original post: I said overflowY: true when I meant overflowY: 'auto'.

I'm using ExtJS 4.2.1.

It doesn't seem to matter what type of component is used to control the visibility of the nested containers. I tried switching from a radiogroup with Yes/No options to a checkbox, and the behavior was unchanged.

I also tried wrapping the card components in an additional container and putting the overflowY: 'auto' config on that container instead of on the card itself, but that didn't work any better.

Johnny Major
21 Jan 2014, 12:11 PM
You want to monitor the scroll event and save off those coordinates. Then on the afterlayout event you could set the scroll back to those saved coordinates. The card layout wraps a div around your content so that would be the item you would want to listen on for the scroll event.

For more information refer to this post... http://www.sencha.com/forum/showthread.php?243617-doLayout-resets-scroll-position

21 Jan 2014, 12:14 PM
can you rebuild your Code on


so we can try a little bit to help you.
(only relevant parts of code)

30 Jan 2014, 4:47 AM
I also have such problem, I find fix for this bug, but it does not work for all situations.

var restoreScroll = myPanel.el.cacheScrollValues();
myOtherContainer.add(myPanel); or
myPanel.setVisible(false); or

In this case, the scroll will not jump to top. But if I want check validation of my input (input.isValid()) - restoreScroll() that didn't work.Someone has ideas ? :)