docs/source/Tip2.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-slider.Tip'>/**
   2 </span> * @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 &lt;pre&gt;
  10     Ext.create('Ext.slider.Single', {
  11         width: 214,
  12         minValue: 0,
  13         maxValue: 100,
  14         useTips: true,
  15         renderTo: Ext.getBody()
  16     });
  17 &lt;/pre&gt;
  18  * Optionally provide your own tip text by passing tipText:
  19  &lt;pre&gt;
  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('&lt;b&gt;{0}% complete&lt;/b&gt;', thumb.value);
  27      }
  28  });
  29  &lt;/pre&gt;
  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 <span id='Ext-slider.Tip-method-onSlide'>    /**
  52 </span>     * @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 <span id='Ext-slider.Tip-method-getText'>    /**
  68 </span>     * 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 });</pre></pre></body></html>