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

[Monti123]

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!!

[mitchellsimoens]

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.

[Monti123]

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!