Ext.Picker: why not make it so slots work horizontally too?

[luismerino]

I'm building an app containing a few horizontal sliders. I figured Ext.Carousel would be the right behavior but it is a dataview to interact with cards, not a value selector. So Ext.Picker is much better targeted to do this, given that I want is to retrieve always the selected value... I figured I could modify Ext.Picker.Slot behaviors a little:

http://screencast.com/t/CjpTav3tucei

This is not bullet-proof yet, and I was strongly wondering if you (the Sencha devs) where thinking of implementing an horizontal version of Picker/Slot.

The main problem I found is that being in a container – hbox – it expands 100%, so the "containerSize" does not increase further than this (the browser's window width).
Ext.Picker.Slot should measure the total width of its container (using the dataview's items) and achieve in this way a good snapping effect and more solid behavior.

This is a feature request. Whether or not you decide to make Ext.Picker work horizontally too, I'm going to extend it so it works properly for me. If anybody would be interested in this let me know, and I'll post my code to Github when finished.

Keep up the good work!

[rdougan]

We have no plans for this at this time. Good idea, though. Looking forward to your implementation.

[eja40]

This is a really great idea, I would love to see your example of this in Github to see how you would solve the problem...

[luismerino]

Hi:

An update on this, since I've been very very busy finishing our application I haven't been able to spend more time on this... Until today! I have found a very simple solution to it that actually it's reliable and works, here's a finished sample:

http://screencast.com/t/j0y039ekQmB (mind that the video's fps is very low).

For those who read this topic and want to use this horizontal picker, I'll be putting together a standalone demo and adding it to a public repo in github sometime this week

Regards,

[eja40]

I'm super excited to see how you did this!!

[luismerino]

Enjoy.

https://github.com/Rendez/st2-picker-pan

[demonicus]

Thanks a lot! This will save me days of work.

[Maarten Nieber]

Fantastic!

[Monti123]

Hi,

Thanks for the contribution!

I tried to add the plugin but it says
Uncaught TypeError: Object [object Object] has no method 'setSnap'
in
PickerSlot.js:70

I tried to check where that came from, and I saw this line:
scroller.setSnap(barWidth);

In the documentation it says no such function exists, so I changed it to:
scroller.setSlotSnapSize(barWidth);

That made it work.

But 2 more issues:

1. slotpick: function(value) {
// This is for your senses...
console.log(value);
},
Wasn't called after the slot was picked.

2. I couldn't create a separate view and use it as an xtype.
I added all the files and created a view:
Ext.define("Fabula.view.PlaceBetPicker", {
extend: 'Fabula.ux.Picker',

xtype: 'StakePicker',

But it didn't work. The result was a standard picker, like the original one. Any clue?

Thanks in advance for the assistance!

And I hope my small fix will help someone