forms - 避免 Ext.form 验证滚动到顶部

Question

我有一个Ext.form.Panel内幕Ext.window。表单高度大于窗口高度，所以我在窗口上有垂直滚动。

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

如何避免这种行为？

Answer 1

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

Answer 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 上的增长选项是麻烦制造者之一。

{
    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%'
}