Page 1 of 4 123 ... LastLast
Results 1 to 10 of 36

Thread: [5.1.0.107] VBox Layout Form field blur causes container to scroll to top

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-16350 in 5.1.1.451.
  1. #1
    Ext JS Premium Member cnelissen's Avatar
    Join Date
    Sep 2007
    Location
    California
    Posts
    226

    Default [5.1.0.107] VBox Layout Form field blur causes container to scroll to top

    Ext version tested:
    • Ext 5.1.0.107 - Broken
    • Ext 5.0.1.1255 - Works


    Browser versions tested against:
    • Chrome 39.0.2171.95 (64-bit)
    • Firefox 34.0.5


    Description:
    If you have a container with layout: 'vbox' that contains form fields with msgTarget: side, when a form field loses focus it causes the parent container to scroll to top. See the test case at: https://fiddle.sencha.com/#fiddle/fnk


    Steps to reproduce the problem:
    • Scroll all the way to the bottom of the panel
    • Focus on a form field
    • Focus on another form field



    The result that was expected:
    The container should not scroll to the top


    The result that occurs instead:
    The container scrolls to the top
    - Clint Nelissen

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,295

    Default

    My application is also impacted by this.

  4. #4
    Sencha User
    Join Date
    Dec 2012
    Posts
    3

    Default

    I have found this to be an issue related to the vbox layout. Any call to updateLayout will cause the scroll position to reset to top, or perhaps be lost when recalculating heights; therefore, the scroll position would also be at the top of the vbox. FYI, updateLayout is called when any item is rendered and then changed with javascript.

    In my example, even a call to setText on a button will fire the updateLayout and then the scroll position will be back to the top of the page.

    In the fiddle, scroll down to the button. onClick will change the button text and will scroll back to the top of the page.
    https://fiddle.sencha.com/#fiddle/g9l

    Work around, avoid the vbox layout until a fix is released.

  5. #5
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,295

    Default

    To get this fixed soon, I have opened Sencha Support ticket 20873 on Jan 5, 2015.

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Brazil
    Posts
    13

    Default

    Any updates on that issue? My application simply can't be updated to Ext 5.1 until this issue has been resolved. Someone knows if this is an issue with the layout implementation or just an incompatibility with the scroll processing of the browser? I mean, the vbox layout explicity sets the scroll positioning at any time?

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Brazil
    Posts
    13

    Default

    I just tested here and this issue happens with HBox too.
    Looks like that the scroll restore of Box layout is not working properly.
    I wasn't able to get a working workaround yet, but this is a big issue =/

  8. #8
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Brazil
    Posts
    13

    Default

    Hello guys,
    I was able to do an override that workaround this problem.
    Since my app has just the root container with VBox and scrollable: true, i could make an implementation that restores the original scroller position after the VBox calculation complete.

    I think this may cause other problems in more complex situations, but for simpler ones this works fine.
    Below is the override that i used:

    Code:
    Ext.define('My.override.VBoxLayoutFix', {
        override: 'Ext.layout.container.VBox',
        beginLayout: function(ownerContext) {
            var scrollable = this.owner.getScrollable();
            if (scrollable) {
                this.lastScrollPosition = scrollable.getPosition();
            }
            this.callParent(arguments);
        },
        completeLayout: function(ownerContext) {
            var scrollable = this.owner.getScrollable();
            this.callParent(arguments);
            if (scrollable) {
                scrollable.scrollTo(this.lastScrollPosition);
            }
        }
    });

  9. #9

    Join Date
    May 2012
    Location
    Linz, AT
    Posts
    66

    Default

    I'm also having the same problem. In my Fiddle I'm using a form layout and the same thing happens.

    My customers are already complaining about the fact.. and they are using it in a productive environment.

  10. #10

    Join Date
    May 2012
    Location
    Linz, AT
    Posts
    66

    Default

    Quote Originally Posted by renatorro View Post
    Code:
    Ext.define('My.override.VBoxLayoutFix', {
        override: 'Ext.layout.container.VBox',
        beginLayout: function(ownerContext) {
            var scrollable = this.owner.getScrollable();
            if (scrollable) {
                this.lastScrollPosition = scrollable.getPosition();
            }
            this.callParent(arguments);
        },
        completeLayout: function(ownerContext) {
            var scrollable = this.owner.getScrollable();
            this.callParent(arguments);
            if (scrollable) {
                scrollable.scrollTo(this.lastScrollPosition);
            }
        }
    });
    is this working for anyone else? scrollable is always null in my debugger. and this doesn't work for me

    I have following situation:
    Viewport: layout fit
    > Container: layout card
    > >Form.Panel: Layout vbox
    > > > Formpanel: layout vbox, scrollable true (this panel jumps back to top while typing)
    > > > Gridpanel: layout fit

    When I'm applying the VBOX fix.. and looking the chrome console. the variable scrollable is always null. Am I missing something?

    Thanks for your help!

Page 1 of 4 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •