Avoid Ext.form validation scrolling to top

问题:

I have a Ext.form.Panel inside Ext.window. Form height is more than window height so I have vertical scroll on window.

On form fields validation (on validitychange event) scroll jumps to the top.

How to avoid this behaviour?

回答1:

I tried to figure out, why one of my forms did scroll up and other did not. Turned out, that I have forgot to explicitly specify layout manager and that default layout manager (anchor) scrolled to top on validity change, while vbox layout did not. While everything looked exactly the same (vbox with align: 'stretch'), it behaved differently when the error was either shown or hidden.

回答2:

I have the same problem :(

I made a creepy workaround (it works to 80%) Sometimes it still jumps to the top. You should know, that I have a window with a layout of 'form'. If you have a window with (for example) a layout of 'fit' with an xtype of 'form' - you may have to change the code a little bit. For example the line el.child(".x-window-body", fasle) wouldn't work.

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);
            }

As you can see, I am listening to the scroll-event and safe and reset the scroll bar. Sometimes (especially if you are writing very quickly in a textbox) the events come in a different order and the page will still jump to the top. Sometimes you also see it flickering around (if it needs too long to set it back to the original position).

So.... As I said, its a creepy workaround. If you find a better solution, please let me know.

EDIT

I also figured out, that the grow option on a textareafield was one of the troublemakers.

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