updateLayout() 导致父容器滚动到顶部

Question

调用 updateLayout() 导致父容器 "jump" 到顶部。在 Ext.Container.container 上设置 viewconfig 似乎没有帮助

viewConfig: {
    preserveScrollOnRefresh: true
},

Answer 1

updateLayout 与 refresh 不同，preserveScrollOnRefresh 仅保留 refresh 上的滚动。您可以查看 ExtJS 代码他们是如何做到的（他们并不真正 "preserve" 滚动，他们存储滚动位置并在刷新后滚动回正确位置）并为 updateLayout 实现相同的方法。

Answer 2

正如 Alexander 所建议的那样，覆盖父容器的 beforeLayout 和 afterLayout 就可以了。

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 3

为遇到类似问题的任何人提供更多选择：

更改布局

问题中提到的 Avoid Ext.form validation scrolling to top, sometimes just changing the layout 可以做到这一点。

例如 ExtJS 4.x 中的表单默认指定了 anchor 布局（ExtJS 6 具有 vbox），这导致表单在表单字段验证时滚动到顶部，如果您将布局更改为 vbox，它不会滚动到顶部。

暂停布局

如果您有一个不需要更新布局的组件，您可以使用 suspendLayout 配置。

updateLayout() 导致父容器滚动到顶部

updateLayout() causing parent container to scroll to top

extjs

extjs6

extjs6-classic