Question

我在Ext.form.Panel内有一个Ext.window。表格高度超过窗口高度，所以我在窗口上有垂直滚动。

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

如何避免这种行为？

Answer 1

我试图弄明白，为什么我的一个表单会向上滚动而其他表单没有。事实证明，我忘记明确指定布局管理器，并且默认布局管理器（锚点）在有效性更改时滚动到顶部，而vbox布局则没有。虽然所有内容看起来完全相同（带有align: 'stretch'的vbox），但在显示或隐藏错误时，其行为会有所不同。

Answer 2

我有同样的问题:(

我做了一个令人毛骨悚然的解决方法（它工作到80％）有时它仍然跳到顶部。你应该知道，我有一个带有'form'布局的窗口。如果你有一个带有（例如）'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%' }

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

2 个答案: