避免 Ext.form 验证滚动到顶部答案

【问题标题】：Avoid Ext.form validation scrolling to top避免 Ext.form 验证滚动到顶部
【发布时间】：2013-02-26 07:49:50
【问题描述】：

我在Ext.window 中有一个Ext.form.Panel。窗体高度大于窗口高度，所以我在窗口上进行垂直滚动。

在表单字段验证（validitychange 事件上）滚动跳转到顶部。

如何避免这种行为？

【问题讨论】：

【解决方案1】：

我试图弄清楚为什么我的一个表单确实向上滚动而另一个没有。原来，我忘记显式指定布局管理器，并且默认布局管理器（锚）在有效性更改时滚动到顶部，而 vbox 布局没有。虽然一切看起来完全一样（带有align: 'stretch' 的vbox），但无论是显示还是隐藏错误，它的行为都会有所不同。

【讨论】：

谢谢，它对我有用。只需将布局更改为“vbox”。

【解决方案2】：

我有同样的问题:(

我做了一个令人毛骨悚然的解决方法（它可以工作到 80%）有时它仍然会跳到顶部。你应该知道，我有一个布局为“表单”的窗口。如果您有一个（例如）布局为“fit”且 xtype 为“form”的窗口 - 您可能需要稍微更改代码。例如行 el.child(".x-window-body", fasle) 行不通。

init: function() {              
    this.control({

           ...

        /** My Ext.window.Window is called reservationwindow **/
        'reservationwindow': {
            afterrender: function(comp) {
                // comp is this Ext.Component == wrapper
                var el = comp.getEl();
                //extjs adds the scrollbar to the body element...
                var elForm = el.child(".x-window-body", false);
                // or el.child(".x-panel-body", false);

                //we are listinig to the scroll-event now
                this.myFormEl = elForm;
                    this.safeScroll = {top:0, left:0};
                elForm.on('scroll', function() {
                    console.log("save");

                    this.safeScroll = this.myFormEl.getScroll();
                }, this);
                elForm.on('click', function() {
                    var resWin = this.getResWin();
                    resWin.scrollBy(0,this.safeScroll.top,false);
                    console.log("reset");
                }, this);
                elForm.on('keyup', function() {
                    var resWin = this.getResWin();
                    resWin.scrollBy(0, this.safeScroll.top, false);
                    console.log("reset");
                }, this);
            }

如您所见，我正在监听滚动事件并安全并重置滚动条。有时（特别是如果你在文本框中写得很快）事件的顺序不同，页面仍然会跳到顶部。有时您还会看到它在四处闪烁（如果需要太长时间才能将其设置回原始位置）。

所以....正如我所说，这是一个令人毛骨悚然的解决方法。如果您找到更好的解决方案，请告诉我。

编辑

我还发现，textareafield 上的 grow 选项是麻烦制造者之一。

{
    id: this.id + '-details',
    xtype: 'textareafield',
//  grow: true,     now it isn't jumping
    name: 'message',
    fieldLabel: 'Zusätzliche Informationen',
    labelAlign: 'top',
    renderder: 'htmlEncode',
    disabled: isDisabled,
    anchor: '100%'
}

【讨论】：