Results 1 to 8 of 8

Thread: Scrolling to an item in the new List component

  1. #1
    Sencha User DrunkenBeard's Avatar
    Join Date
    May 2011
    Posts
    55
    Vote Rating
    -1
      0  

    Default Scrolling to an item in the new List component

    Hi,

    With the way the new List component works how can I scroll to a specific item. The offsetTop method doesn't seem to work (because the item isn't rendered yet) and calculating the offset by adding item heights before reaching the targeted item doesn't work either because you have to scroll first for the items to be rendered.

    The idea I have right now is to get the ViewItems, look for the targeted item inside them and scroll to it if I find it, otherwise scroll to the end of the current view (rendering a new set of items) and repeat the process until I find the targeted item. This can be optimized by first scrolling to (itemIndex - 1)*defaultItemHeight before beginning the hunt. The reason this first scrolling is not enough on its own is because of grouping headers that have to be taken into account.

    Is there a way to do this more "easily"?

    Thanks

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,412
    Vote Rating
    1288
      -1  

    Default

    Use the scroller...

    Code:
    list.getScrollable().getScroller().scrollTo(x, y);
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User DrunkenBeard's Avatar
    Join Date
    May 2011
    Posts
    55
    Vote Rating
    -1
      0  

    Default

    Hi,

    The problem is the y coordinate. How do I get the coordinate of an item when it hasn't been rendered yet (the new list component doesn't render an item until you actually scroll to it).

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    22
    Vote Rating
    4
      0  

    Default

    I am having the very same problem. This was easy to do before the infinite list, but as DrunkenBeard mentioned, it is much more difficult when there are list items that haven't been rendered.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    22
    Vote Rating
    4
      0  

    Default

    I dug into this a little more. I don't have a full implementation yet, but here are some hints.

    After the list's painted event, you can still get the viewItems from the list, but they won't have any offsets to use with the scroller. In the element property of a viewitem, there is a getOffsetsTo method that returns a good offset from the top of the list even if the list is grouped and the item isn't rendered yet.

    This should be enough to run with to scroll to a specific item.

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    83
    Vote Rating
    1
      0  

    Default

    If you know the index of the item you want to scroll to, you can use something like this:

    Code:
    function scrollToSelectedItem(list, index) {
        //console.log("scrollToSelectedItem: index=" + index);
    
    
        var map = list.getItemMap();
        var offsetTop = map.map[index];
        var centeringOffset = 130;
        if (offsetTop > centeringOffset)
            offsetTop -= centeringOffset;
        //console.log("OffsetTop=" + offsetTop);
    
    
        var scroller = list.getScrollable().getScroller();
        scroller.scrollTo(0, offsetTop, undefined);
    }

  7. #7
    Sencha User
    Join Date
    May 2016
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Its dont work for me I have error Uncaught TypeError: Cannot read property 'getScroller' of undefined

  8. #8
    Sencha User
    Join Date
    May 2014
    Posts
    18
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by hadassa View Post
    Its dont work for me I have error Uncaught TypeError: Cannot read property 'getScroller' of undefined
    Can u try set scrollable:true in list ?

Posting Permissions

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