Results 1 to 5 of 5

Thread: Always show the tip text of Slider in Extjs

  1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    20
    Vote Rating
    0
      0  

    Default Always show the tip text of Slider in Extjs

    How to keep the tip text of the slider always visible?
    Currently, the tip text is being visible whenever the user drags the bar of the slider.
    I searched on docs but couldn't find any related concepts.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    There isn't a config to do this. You can kind of do this but I'm not sure of any issues with other tips used in an app:

    Code:
    Ext.define('Override.slider.Tip', {
        override : 'Ext.slider.Tip',
    
        init : function(slider) {
            var me = this;
    
            me.callParent([slider]);
    
            slider.on({
                scope       : me,
                single      : true,
                delay       : 100, //settle down DOM
                afterRender : me.onSliderRender
            });
    
            slider.un({
                scope   : me,
                dragend : me.hide //this is what stops the tip from hiding
            });
        },
    
        onSliderRender : function(slider) {
            var thumbs  = slider.thumbs,
                t       = 0,
                tLen    = thumbs.length,
                onSlide = this.onSlide;
    
            for (; t < tLen; t++) {
                onSlide(slider, null, thumbs[t]);
            }
        }
    });
    
    Ext.create('Ext.slider.Single', {
        width     : 200,
        value     : 50,
        increment : 10,
        minValue  : 0,
        maxValue  : 100,
        renderTo  : Ext.getBody()
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    20
    Vote Rating
    0
      0  

    Default

    @mitchellsimoens This is working. Thanks. But actually, I am also moving the bar using two buttons which are adjacent to the slider ('<' and '>'). Your code works fine if I am only working with slider. But if I just press the adjacent buttons, the bar moves but not the tip text. Anyway to solve this too? [B]

  4. #4
    Sencha User
    Join Date
    Jul 2013
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Mitchell, I want to try this for displaying tooltips in Sencha Touch slider, but I'm confused.. how do I implement your code above? I'm using Sencha Architect if you can give it in context of that.. If you want to keep it more vague to help other people that's also fine.

    Thanks,
    Chris

  5. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    20
    Vote Rating
    0
      0  

    Default

    I asked the same question on Stackoverflow. where I got the solution. Here is the link http://stackoverflow.com/q/15198053/1577396

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •