updateLayout() causing parent container to scroll to top

Question

calling updateLayout() is causing the parent container to "jump" to the top. Setting the viewconfig on the Ext.Container.container does not seem to help

viewConfig: {
    preserveScrollOnRefresh: true
},

score 6 · Accepted Answer · answered Aug 19 '16 at 12:00

6

As suggested by Alexander, 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);
    }
},

answered Aug 19 '16 at 12:00

Shain Padmajan

424
3
9

Thanks for posting the solution. Works well. The only thing is I was trying to do the same on 6.0.2 Containers and I had to use beforeadd instead of beforeLayout because it was missing. Why do you do the me.callParent(args) anyways? – Manish Pradhan Mar 19 '18 at 19:25

score 4 · Answer 2 · answered Aug 13 '16 at 09:08

updateLayout is not the same as refresh, and preserveScrollOnRefresh only preserves scroll on refresh. You could look into ExtJS code how they did it (they don't really "preserve" scroll, they store the scroll position and scroll back to the correct position after refresh) and implement the same for updateLayout.

score 1 · Answer 3 · answered Jul 31 '17 at 15:47

To cover more options for anyone having similar problems:

Changing the layout

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

For example form in ExtJS 4.x had anchor layout specified by default (ExtJS 6 has vbox), which caused the form to scroll to top on form field validation, if you change the layout to vbox, it does not scroll to top.

Suspending layout

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

updateLayout() causing parent container to scroll to top

3 Answers3