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

Question

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

viewConfig: {
    preserveScrollOnRefresh: true
},

Answer 1

正如亚历山大所建议的那样，覆盖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 2

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

Answer 3

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

更改布局

正如问题中提到的，避免 Ext.form 验证滚动到顶部，有时只需更改layout即可。

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

暂停布局

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