1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    1
    Answers
    1
    Monti123 is on a distinguished road

      0  

    Default Unanswered: Dynamically identifying value of an item which is in the center of a list

    Unanswered: Dynamically identifying value of an item which is in the center of a list


    Hi,

    I want to create a horizontal list of values, in a way that the middle item will be the "chosen" one, I will be able to find out which one is it and what its value.

    And I want this item to adjust itself to the middle of the screen. In a way that after scrolling, the closest item to the middle is animated to the middle (by scrolling) and its value is accessible.

    I've been trying to play with a list component, but there were 2 problems:
    1. I couldn't detect which item is closest to the middle.
    2. I couldn't move it dynamically, for some reason this.scroll.scrollTo({x:0, y:0}, true); didn't work. I need it to work so I adjust it's position so it'll be 100% in the center.

    I thought about using a carousel which is not 100% width, if there is such a thing.

    I know it's not an easy one, but since this forum surprises me every time again and again I thought I'd give it a try.

    Thanks in advance!!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    Answers
    3575
    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

      0  

    Default


    List doesn't have a scroll property, you may need list.getScrollable().getScroller()

    You can get the width of the list and then determine the range that a list can take to be in the middle and loop through the list items to find which is at that position.
    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
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    1
    Answers
    1
    Monti123 is on a distinguished road

      0  

    Default


    Hi Mitchell,

    For some reason list.getScrollable().getScroller() didn't work.

    I tried to do something like:

    xtype: 'list',

    listeners:{


    itemtouchend: function ( me, index, target, record, e, eOpts )
    {
    console.log('touch end');
    me.getScrollable().getScroller().scrollTo({x:0, y:0}, true);
    },

    Didn't work.

    There are other obstacles, how can I get the width of the list? and how can I know for each item, where it starts and ends?

    I was thinking about a different solution, maybe a dataview comprised of dataitems, in which each item has a listener that checks if this item, after movement has stopped, covers the point of width 50% of the screen (right in the middle), and if it returns true, than I can animate the middle of the dataitem there. What do you think of this direction and if you think that's feasible, what's the best way to implement?

    Thanks!

Thread Participants: 1

Tags for this Thread