docs/source/Tip2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-slider-Tip'>/**
  19 </span> * Simple plugin for using an Ext.tip.Tip with a slider to show the slider value. In general this class is not created
  20  * directly, instead pass the {@link Ext.slider.Multi#useTips} and {@link Ext.slider.Multi#tipText} configuration
  21  * options to the slider directly.
  22  *
  23  *     @example
  24  *     Ext.create('Ext.slider.Single', {
  25  *         width: 214,
  26  *         minValue: 0,
  27  *         maxValue: 100,
  28  *         useTips: true,
  29  *         renderTo: Ext.getBody()
  30  *     });
  31  *
  32  * Optionally provide your own tip text by passing tipText:
  33  *
  34  *     @example
  35  *     Ext.create('Ext.slider.Single', {
  36  *         width: 214,
  37  *         minValue: 0,
  38  *         maxValue: 100,
  39  *         useTips: true,
  40  *         tipText: function(thumb){
  41  *             return Ext.String.format('**{0}% complete**', thumb.value);
  42  *         },
  43  *         renderTo: Ext.getBody()
  44  *     });
  45  */
  46 Ext.define('Ext.slider.Tip', {
  47     extend: 'Ext.tip.Tip',
  48     minWidth: 10,
  49     alias: 'widget.slidertip',
  50     offsets : [0, -10],
  51
  52     isSliderTip: true,
  53
  54     init: function(slider) {
  55         var me = this;
  56
  57         slider.on({
  58             scope    : me,
  59             dragstart: me.onSlide,
  60             drag     : me.onSlide,
  61             dragend  : me.hide,
  62             destroy  : me.destroy
  63         });
  64     },
  65 <span id='Ext-slider-Tip-method-onSlide'>    /**
  66 </span>     * @private
  67      * Called whenever a dragstart or drag event is received on the associated Thumb.
  68      * Aligns the Tip with the Thumb's new position.
  69      * @param {Ext.slider.MultiSlider} slider The slider
  70      * @param {Ext.EventObject} e The Event object
  71      * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
  72      */
  73     onSlide : function(slider, e, thumb) {
  74         var me = this;
  75         me.show();
  76         me.update(me.getText(thumb));
  77         me.doComponentLayout();
  78         me.el.alignTo(thumb.el, 'b-t?', me.offsets);
  79     },
  80
  81 <span id='Ext-slider-Tip-method-getText'>    /**
  82 </span>     * Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider
  83      * Thumb that the Tip is attached to. Override to customize.
  84      * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
  85      * @return {String} The text to display in the tip
  86      */
  87     getText : function(thumb) {
  88         return String(thumb.value);
  89     }
  90 });</pre>
  91 </body>
  92 </html>