Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / src / slider / Tip.js
1 /**
2  * @class Ext.slider.Tip
3  * @extends Ext.tip.Tip
4  * Simple plugin for using an Ext.tip.Tip with a slider to show the slider value. In general this
5  * class is not created directly, instead pass the {@link Ext.slider.Multi#useTips} and 
6  * {@link Ext.slider.Multi#tipText} configuration options to the slider directly.
7  * {@img Ext.slider.Tip/Ext.slider.Tip1.png Ext.slider.Tip component}
8  * Example usage:
9 <pre>
10     Ext.create('Ext.slider.Single', {
11         width: 214,
12         minValue: 0,
13         maxValue: 100,
14         useTips: true,
15         renderTo: Ext.getBody()
16     });   
17 </pre>
18  * Optionally provide your own tip text by passing tipText:
19  <pre>
20  new Ext.slider.Single({
21      width: 214,
22      minValue: 0,
23      maxValue: 100,
24      useTips: true,
25      tipText: function(thumb){
26          return Ext.String.format('<b>{0}% complete</b>', thumb.value);
27      }
28  });
29  </pre>
30  * @xtype slidertip
31  */
32 Ext.define('Ext.slider.Tip', {
33     extend: 'Ext.tip.Tip',
34     minWidth: 10,
35     alias: 'widget.slidertip',
36     offsets : [0, -10],
37     
38     isSliderTip: true,
39
40     init: function(slider) {
41         var me = this;
42         
43         slider.on({
44             scope    : me,
45             dragstart: me.onSlide,
46             drag     : me.onSlide,
47             dragend  : me.hide,
48             destroy  : me.destroy
49         });
50     },
51     /**
52      * @private
53      * Called whenever a dragstart or drag event is received on the associated Thumb. 
54      * Aligns the Tip with the Thumb's new position.
55      * @param {Ext.slider.MultiSlider} slider The slider
56      * @param {Ext.EventObject} e The Event object
57      * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
58      */
59     onSlide : function(slider, e, thumb) {
60         var me = this;
61         me.show();
62         me.update(me.getText(thumb));
63         me.doComponentLayout();
64         me.el.alignTo(thumb.el, 'b-t?', me.offsets);
65     },
66
67     /**
68      * Used to create the text that appears in the Tip's body. By default this just returns
69      * the value of the Slider Thumb that the Tip is attached to. Override to customize.
70      * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
71      * @return {String} The text to display in the tip
72      */
73     getText : function(thumb) {
74         return String(thumb.value);
75     }
76 });