Results 1 to 4 of 4

Thread: Grid with groupingFeature always scrolling to window top on expand or collapse group

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Vote Rating
    2
      0  

    Default Grid with groupingFeature always scrolling to window top on expand or collapse group

    I have an issue currently with a grouping grid that is inside a Panel. The grid dynamically increases or decreases its heights depending on the data. All that works fine.

    What is annoying is that every time a group is expanded or collapsed the window scrolls to the top if it is not already there.

    The grouping feature in the extjs framework calls
    Code:
      if (preventSizeCalculation !== true) {                  view.refreshSize(); 
    
                }
    to recalculate the panel size but unfortunately when layouting is resumed the window scrolls.

    How can I stop this? I see that grid view has a preserveScrollOnRefresh : true option but that doesnt work here since the scrollbar is the browsers window scrollbar and not some scrollbar inside the grid panel.

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1536
      0  

    Default

    The browser scrolls or the panel the grid is in?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Vote Rating
    2
      0  

    Default

    The browser, the grouping grid itself is in a Panel with auto layout that is nested in a container using hbox layout.

    The Panel grows in height accordingly to the data in the grouping grid and when there is enough data the browser correctly renders a scrollbar.

    But when I then scroll down a bit and expand or collapse a group the browser goes back to the top of the page.

    in FF and IE


    initial screenshot, scrollbar is not on top

    initial_scrollbar.jpg

    after expanding a group, scrollbar moved up, you cant see it here but its up to the very top tof the browser the screenshot is cut off since I was not comfortable showing the entire in development app here but yes the browser window always scrolls up to the top of the page if it is not there already which is akward and requires the user to always scroll back down to the group that was just expanded or collapsed

    post_expand_scrollbar.jpg

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Vote Rating
    2
      0  

    Default

    any update to this?

    When I append
    Ext.fly(document).on("scroll", function(){console.log("body scrolled");});

    I can see that the document does indeed scroll top everytime a group is expanded or collapsed.

    I tried as a workaround in the expand and collapse event to scrollIntoView with the native browser function and it works well in firefox but totally breaks the layout in IE.
    When I try to use the Ext.Element scrollIntoView method however it does not work at all, it has no effect in either firefox or IE unless i debug it and set a breakpoint at the line. I am assuming that he does not execute it because it is already scrolling and it is not qeued?

    Any idea for a workaround at least?

Posting Permissions

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