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

Question

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

在表单字段验证(在validitychange事件上)滚动跳转到顶部.

如何避免这种行为？

Answer 1

我也有同样的问题 ：（

\n\n

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

\n\n

init: function() {              \n    this.control({\n\n           ...\n\n        /** My Ext.window.Window is called reservationwindow **/\n        \'reservationwindow\': {\n            afterrender: function(comp) {\n                // comp is this Ext.Component == wrapper\n                var el = comp.getEl();\n                //extjs adds the scrollbar to the body element...\n                var elForm = el.child(".x-window-body", false);\n                // or el.child(".x-panel-body", false);\n\n                //we are listinig to the scroll-event now\n                this.myFormEl = elForm;\n                    this.safeScroll = {top:0, left:0};\n                elForm.on(\'scroll\', function() {\n                    console.log("save");\n\n                    this.safeScroll = this.myFormEl.getScroll();\n                }, this);\n                elForm.on(\'click\', function() {\n                    var resWin = this.getResWin();\n                    resWin.scrollBy(0,this.safeScroll.top,false);\n                    console.log("reset");\n                }, this);\n                elForm.on(\'keyup\', function() {\n                    var resWin = this.getResWin();\n                    resWin.scrollBy(0, this.safeScroll.top, false);\n                    console.log("reset");\n                }, this);\n            }\n

\n\n

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

\n\n

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

\n\n

编辑

\n\n

我还发现，文本区域上的增长选项是麻烦制造者之一。

\n\n

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

\n