1. #1
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      3  

    Default Slider Fill

    Slider Fill


    Just want to share sliderfill plugin, which can be used to apply background color for slider, when value is changed or thumb is moved. This supports slider with single and multiple thumb. Filling effects are not so fluid and i had to apply slider override to make it work.


    You can find code here https://github.com/tomalex0/SenchaTouch-V2-SliderFill


    Screenshots are available at
    https://github.com/tomalex0/SenchaTo...l_vertical.png
    https://github.com/tomalex0/SenchaTo...erfill_hor.png

    Please have a look into the code and do let me know if it can be written in better way

    Works with ST2RC
    Sencha Touch Demos

    IosToggleField Forum - Github
    Form Validation
    Forum - Github
    Iphone Settings Menu
    Forum
    Sqlite Storage & Login Manifest
    Forum
    KitchenSink MVC
    Forum - Github
    SqliteProxy-v1 Forum - Github
    SqliteProxy-v2
    Forum - Github
    Arshaw Fullcalendar Forum - Github






  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    Nice! I like the multiple thumb one!
    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
    Nov 2011
    Posts
    20
    Vote Rating
    0
    fdl is on a distinguished road

      0  

    Default


    Nice .... exactly what I need ...

    Have you found a way to improved the " dragging fluidity"?

    Regards

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    1
    Royale83 is on a distinguished road

      1  

    Default


    Hello,

    I am new to Sencha Touch, Javascript, Html (the lot).

    I would appreciate if someone can tell me how to apply this plugin into my project. I would be very grateful if you could me a step by step guide if possible.

    Thanks

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    35
    Vote Rating
    1
    Nos is on a distinguished road

      0  

    Default


    I receive a javascript error when i use the Plugin :
    TypeError : 'undefined' is not a function (evaluating 'thumb.getId()'

    I don't know why ?

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    118
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


    Love it !!
    Just what I needed

    Thanks

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Posts
    9
    Vote Rating
    0
    Bhil is on a distinguished road

      0  

    Default Problem while getting it working in Sencha Architect 2

    Problem while getting it working in Sencha Architect 2


    Hi tomalex0!

    This plugin is great and works fine in the browser if I follow your example on github but not in Architects Canvas (the cancas is empty). It seems like Plugins should be implemented with overrides and not with the 'plugins' option. But how do I create such an override in Architect for this Plugin?

    Thanks for help

    Bhil

  8. #8
    Sencha User
    Join Date
    May 2012
    Posts
    35
    Vote Rating
    1
    Nos is on a distinguished road

      0  

    Default


    If you use sencha Architect 2.1, you can do the followings:
    1/ in your slider object, in the search bar, you write "plugins" and you touch add button.
    2/ in your new property "plugins", you turn it to "object" ( click on the icon on the left of your object)
    3/ click on code and write this :
    [{ xclass:'Ext.plugin.SliderFill', fillCls: ['x-slider-fillClass']}]

    And that's it !

  9. #9
    Sencha User
    Join Date
    Aug 2012
    Posts
    9
    Vote Rating
    0
    Bhil is on a distinguished road

      0  

    Default


    Thanks a lot for the quick answer!

    Thats what I did but then the canvas is empy and I cannot configure other elements any more. Its an known issue. To work around this issue I was told to use overrides. But I dont know how to implement such an override in architect for only one slider.
    Thank you for your help!

    Bhil

  10. #10
    Sencha User
    Join Date
    Aug 2012
    Posts
    9
    Vote Rating
    0
    Bhil is on a distinguished road

      0  

    Default


    Ok I found a dirty workaround:

    I just added "component.setPlugins(...)" to my init event for sliders.

    It looks something like this:
    PHP Code:
    component.setPlugins({
            
    xclass 'Ext.plugin.SliderFill',
            
    fillCls : ['x-musicplayer-timer']
        }); 
    Now the canvas still works.