src/widgets/tips/SliderTip.js

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.slider.Tip
   9  * @extends Ext.Tip
  10  * Simple plugin for using an Ext.Tip with a slider to show the slider value. Example usage:
  11 <pre>
  12 new Ext.Slider({
  13     width: 214,
  14     minValue: 0,
  15     maxValue: 100,
  16     plugins: new Ext.slider.Tip()
  17 });
  18 </pre>
  19  * Optionally provide your own tip text by overriding getText:
  20  <pre>
  21  new Ext.Slider({
  22      width: 214,
  23      minValue: 0,
  24      maxValue: 100,
  25      plugins: new Ext.slider.Tip({
  26          getText: function(thumb){
  27              return String.format('<b>{0}% complete</b>', thumb.value);
  28          }
  29      })
  30  });
  31  </pre>
  32  */
  33 Ext.slider.Tip = Ext.extend(Ext.Tip, {
  34     minWidth: 10,
  35     offsets : [0, -10],
  36
  37     init: function(slider) {
  38         slider.on({
  39             scope    : this,
  40             dragstart: this.onSlide,
  41             drag     : this.onSlide,
  42             dragend  : this.hide,
  43             destroy  : this.destroy
  44         });
  45     },
  46
  47     /**
  48      * @private
  49      * Called whenever a dragstart or drag event is received on the associated Thumb.
  50      * Aligns the Tip with the Thumb's new position.
  51      * @param {Ext.slider.MultiSlider} slider The slider
  52      * @param {Ext.EventObject} e The Event object
  53      * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
  54      */
  55     onSlide : function(slider, e, thumb) {
  56         this.show();
  57         this.body.update(this.getText(thumb));
  58         this.doAutoWidth();
  59         this.el.alignTo(thumb.el, 'b-t?', this.offsets);
  60     },
  61
  62     /**
  63      * Used to create the text that appears in the Tip's body. By default this just returns
  64      * the value of the Slider Thumb that the Tip is attached to. Override to customize.
  65      * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
  66      * @return {String} The text to display in the tip
  67      */
  68     getText : function(thumb) {
  69         return String(thumb.value);
  70     }
  71 });
  72
  73 //backwards compatibility - SliderTip used to be a ux before 3.2
  74 Ext.ux.SliderTip = Ext.slider.Tip;