11

In Extjs 4.1.1a, 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.

If it is not documented or not possible, then please explain me how to create the tip text manually. The tip text should move along the bar of the slider and it should not overcome or hide any other adjacent components.

Here is my code which generates a simple slider:

xtype:'slider',
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 6,
minValue: 1,
maxValue: 12,
useTips: true,

tipText: function(thumb){
    var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var value = Ext.String.format(months[thumb.value]);
    return value;
},

Question 2: Is it atleast possible to show the tip text when hovered on the slider?

PS: I also asked the same question here.

EDIT 1: I am also moving the seek bar of the slider with two adjacent buttons (< and >). So, care must be taken that if I move the seek bar with the adjacent buttons then the tip text should also move.

EDIT 2: The tip text should be visible when hovered on the slider or the adjacent buttons.

Answer: http://jsfiddle.net/WdjZn/1/

Mr_Green
  • 40,727
  • 45
  • 159
  • 271

2 Answers2

9

I've managed to keep tip visible by overriding some event handlers in Ext.slider.Tip:

Ext.define('AlwaysVisibleTip', {
    extend: 'Ext.slider.Tip',

    init: function(slider) {
        var me = this;
        me.callParent(arguments);
        slider.removeListener('dragend', me.hide);
        slider.on({
            scope: me,
            change: me.onSlide,
            afterrender: function() {
                setTimeout(function() {
                    me.onSlide(slider, null, slider.thumbs[0]);
                }, 100);
            }
        });
    }
});

Ext.create('Ext.slider.Single', {
    animate: false,
    plugins: [Ext.create('AlwaysVisibleTip')],
    // ...
});

Check out the demo.

Drawbacks of my approach:

  1. It relies on private method onSlide
  2. It applicable only to single slider
  3. Keyboard navigation works properly only if animate is set to false
  4. setTimeout is used in order to adjust initial position of the tip

Fixing this drawbacks would require hacking not only the Ext.slider.Tip class but Ext.slider.Multy class and probably Ext.slider.Thumb class.

Edit

Replaced changecomplete event with change event as changecomplete is not fired when slider.setValue() is called.

Added demo of slider with adjacent buttons.

Edit2

tipText config is no longer applied if custom tip plugin is used. You have to use getText config of the plugin:

Ext.create('Ext.slider.Single', {
    animate: false,
    plugins: [Ext.create('AlwaysVisibleTip',{
        getText: function(thumb) {
            var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
            return Ext.String.format(months[thumb.value]);
        }
    })],
    // ...
});

Updated the demo.

Molecular Man
  • 22,277
  • 3
  • 72
  • 89
  • +1 Thank you for detailed explanation which I can't understand though :). I am trying now to understand it. – Mr_Green Mar 08 '13 at 07:09
  • You example is great but as I mentioned in my edit that I am also controlling the bar with two adjacent buttons. If I move the bar with the help of two adjacent buttons, the tip text doesn't move. – Mr_Green Mar 11 '13 at 10:27
  • @Mr_Green, yep. I used `changecomplete` whereas I should have used `change` event. Edited answer and fixed demo. – Molecular Man Mar 11 '13 at 11:35
  • you came very close. the `tip text` is always being one step back. I mean at the previous value. If I slide the bar from value `2` to `32`, the `tip text` is staying at `2` and showing the value `32`. – Mr_Green Mar 11 '13 at 11:40
  • @Mr_Green, this is because slider animates motion of thumb. You have to setup slider with `animate: false` as in my demos. – Molecular Man Mar 11 '13 at 11:48
  • sorry, working properly when I added `animate:false`. thanks. – Mr_Green Mar 11 '13 at 11:48
  • How to add the `tip text` values dynamically from the controller? I mean in the above code in my post, I want to add the **config** `tip text` from the controller side. Please tell me how to do that? – Mr_Green Mar 11 '13 at 11:53
  • Please check this post where I asked the same question which I asked above in my comment. http://stackoverflow.com/q/15338960/1577396 – Mr_Green Mar 11 '13 at 12:51
  • I can't assign `tip text` values on my own after include the plugin you mentioned here. If I remove that plugin, I can change the `tip text` values. Please check the comment added in my post's code to understand clearly. – Mr_Green Mar 12 '13 at 06:11
  • @Mr_Green, yes, you have to use plugin's `getText` config. Updated my answer. – Molecular Man Mar 12 '13 at 06:56
  • Yes, this is working. Thanks. I will wait for sometime (check for any bugs) and reward you the bounty. – Mr_Green Mar 12 '13 at 07:04
  • The question which I am going to ask is not related to this post. The `tip text` is being visible top of the slide bar as in your previous [fiddle](http://jsfiddle.net/molecule/WdjZn/). I would like to have it below as shown in your current fiddle. Anyway to position the `tip text`? Though, there may be work around, I would like to position because I need to design the `tip text` in such a way that it should not exceed the slider container when pointing to the starting or ending slider values. – Mr_Green Mar 12 '13 at 07:16
  • @Mr_Green, check out [this config](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.slider.Tip-cfg-align) and [this one](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.slider.Tip-cfg-position) – Molecular Man Mar 12 '13 at 08:36
  • ok thanks for those links. Your code is working fine in [jsfiddle](http://jsfiddle.net/WdjZn/1/) but when I added this to my project, it is not working fine. I mean, when I drag the bar and leave it, the `tip text` is hiding which I don't want to happen. – Mr_Green Mar 12 '13 at 08:40
  • Still this works in fiddle http://jsfiddle.net/WdjZn/1/ but not in my project. I am doing everything same. I don't know why it is not working. Here not working means, whenever I drag the bar and drop it, the tip text is hiding. for other actions the tip text is working fine. – Mr_Green Mar 15 '13 at 05:52
  • @Mr_Green, "...I don't know why it is not working...". I don't know either. Try to debug it to find out where tip's method `hide` is called. – Molecular Man Mar 18 '13 at 08:11
  • Ok I will try. Your solution is working perfect but just a minor bug is happening i.e when I drag the bar and leave it, the tip text is hiding. In other conditions, the tip text is visible(working fine). (sorry, I am telling the same story again. I assumed you might not have understood the above comment). – Mr_Green Mar 18 '13 at 08:18
  • I still can't find the bug but as your fiddle is working fine, I decided to mark your solution as answer. Thanks for your help. – Mr_Green Mar 18 '13 at 09:42
  • I still can't get it in real time scenario. So, I created the complete project with your code and [**linking it here**](https://www.dropbox.com/s/t4ag1403u01bbst/Example%201001.zip). please have a look. – Mr_Green Mar 26 '13 at 05:00
2

for extjs 4.2,
change :
slider.removeListener('dragend', me.hide);
to :
slider.removeListener('dragend', me.hide, me);

MarcAndre
  • 86
  • 7