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

【问题标题】：updateLayout() causing parent container to scroll to topupdateLayout() 导致父容器滚动到顶部
【发布时间】：2016-12-19 02:53:21
【问题描述】：

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

viewConfig: {
    preserveScrollOnRefresh: true
},

【问题讨论】：

标签： extjs extjs6 extjs6-classic

【解决方案1】：

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

【讨论】：

【解决方案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);
    }
},

【讨论】：

感谢您发布解决方案。效果很好。唯一的事情是我试图在 6.0.2 Containers 上做同样的事情，我不得不使用 beforeadd 而不是 beforeLayout 因为它丢失了。你为什么要做 me.callParent(args) 呢？

【解决方案3】：

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

更改布局

正如问题Avoid Ext.form validation scrolling to top 中所述，有时只需更改layout 就可以解决问题。

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

暂停布局

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

【讨论】：