UpdateLayout () calling the parent container to scroll up

Question

calling updateLayout () causes the parent container to jump up. Setting viewconfig on Ext.Container.container does not help

viewConfig: { preserveScrollOnRefresh: true }, 

Answer 1

As Alexander suggested, overriding beforeLayout and afterLayout for the parent container did the trick.

 beforeLayout: function() { var me = this, scroller = me.getScrollable(); me.callParent(arguments); if (scroller) { me.savedScrollPos = scroller.getPosition(); } }, afterLayout: function() { var me = this, scroller = me.getScrollable(); me.callParent(arguments); if (scroller && me.savedScrollPos) { scroller.scrollTo(me.savedScrollPos); } }, 

Answer 2

updateLayout does not match refresh , and preserveScrollOnRefresh only keeps scrolling to refresh . You can look in the ExtJS code how they did it (they do not really “save” the scroll, they keep the scroll position and scroll back to the desired position after the update) and implement the same for updateLayout.

Answer 3

To give more opportunities to those who have similar problems:

Layout change

As mentioned in the question Avoid scrolling the Ext.form version check to the top , sometimes just changing the layout can do the trick.

For example, in an ExtJS 4.x form, the anchor layout was installed by default (ExtJS 6 has a vbox ), which caused the form to scroll up to check the form field; if you change the layout to vbox , it does not scroll up.

Suspend Layout

If you have a component that does not need to update the layout with changing it, you can use the suspendLayout configuration.