docs/source/SliderTip.html

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