1. #1
    Sencha User DrunkenBeard's Avatar
    Join Date
    May 2011
    Posts
    55
    Vote Rating
    -2
    DrunkenBeard has a little shameless behaviour in the past

      0  

    Default Scrolling to an item in the new List component

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      -1  

    Default


    Use the scroller...

    Code:
    list.getScrollable().getScroller().scrollTo(x, y);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    -2
    DrunkenBeard has a little shameless behaviour in the past

      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
    Stx.Greg is on a distinguished road

      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
    Stx.Greg is on a distinguished road

      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
    scottd is on a distinguished road

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