1. #1
    Sencha User luismerino's Avatar
    Join Date
    Oct 2011
    Location
    Berlin
    Posts
    46
    Vote Rating
    4
    luismerino is on a distinguished road

      0  

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

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


    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!

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    We have no plans for this at this time. Good idea, though. Looking forward to your implementation.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    53
    Vote Rating
    1
    eja40 is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User luismerino's Avatar
    Join Date
    Oct 2011
    Location
    Berlin
    Posts
    46
    Vote Rating
    4
    luismerino is on a distinguished road

      0  

    Default


    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,

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    53
    Vote Rating
    1
    eja40 is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User luismerino's Avatar
    Join Date
    Oct 2011
    Location
    Berlin
    Posts
    46
    Vote Rating
    4
    luismerino is on a distinguished road

      1  

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Location
    San Francisco, California
    Posts
    3
    Vote Rating
    0
    demonicus is on a distinguished road

      0  

    Default


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

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    40
    Vote Rating
    0
    Maarten Nieber can only hope to improve

      0  

    Default Thanks!

    Thanks!


    Fantastic!

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

      0  

    Default


    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