lixinru
/
YtIoT


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-slider-Tip'>/**
</span> * Simple plugin for using an Ext.tip.Tip with a slider to show the slider value. In general this class is not created
 * directly, instead pass the {@link Ext.slider.Multi#useTips} and {@link Ext.slider.Multi#tipText} configuration
 * options to the slider directly.
 *
 *     @example
 *     Ext.create('Ext.slider.Single', {
 *         width: 214,
 *         minValue: 0,
 *         maxValue: 100,
 *         useTips: true,
 *         renderTo: Ext.getBody()
 *     });
 *
 * Optionally provide your own tip text by passing tipText:
 *
 *     @example
 *     Ext.create('Ext.slider.Single', {
 *         width: 214,
 *         minValue: 0,
 *         maxValue: 100,
 *         useTips: true,
 *         tipText: function(thumb){
 *             return Ext.String.format('**{0}% complete**', thumb.value);
 *         },
 *         renderTo: Ext.getBody()
 *     });
 */
Ext.define('Ext.slider.Tip', {
    extend: 'Ext.tip.Tip',
    minWidth: 10,
    alias: 'widget.slidertip',
    
<span id='Ext-slider-Tip-cfg-offsets'>    /**
</span>     * @cfg {Array} [offsets=null]
     * Offsets for aligning the tip to the slider. See {@link Ext.dom.Element#alignTo}. Default values
     * for offsets are provided by specifying the {@link #position} config.
     */
    offsets : null,
    
<span id='Ext-slider-Tip-cfg-align'>    /**
</span>     * @cfg {String} [align=null]
     * Alignment configuration for the tip to the slider. See {@link Ext.dom.Element#alignTo}. Default
     * values for alignment are provided by specifying the {@link #position} config.
     */
    align: null,
    
<span id='Ext-slider-Tip-cfg-position'>    /**
</span>     * @cfg {String} [position=For horizontal sliders, &quot;top&quot;, for vertical sliders, &quot;left&quot;] 
     * Sets the position for where the tip will be displayed related to the thumb. This sets
     * defaults for {@link #align} and {@link #offsets} configurations. If {@link #align} or 
     * {@link #offsets} configurations are specified, they will override the defaults defined
     * by position.
     */
    position: '',
    
    defaultVerticalPosition: 'left',
    
    defaultHorizontalPosition: 'top',

    isSliderTip: true,

    init: function(slider) {
        var me = this,
            align,
            offsets;
        
        if (!me.position) {
            me.position = slider.vertical ? me.defaultVerticalPosition : me.defaultHorizontalPosition;
        }
            
        switch (me.position) {
            case 'top':
                offsets = [0, -10];
                align = 'b-t?';
                break;
            case 'bottom':
                offsets = [0, 10];
                align = 't-b?';
                break;
            case 'left':
                offsets = [-10, 0];
                align = 'r-l?';
                break;
            case 'right':
                offsets = [10, 0];
                align = 'l-r?';
        }
        
        if (!me.align) {
            me.align = align;
        }
        
        if (!me.offsets) {
            me.offsets = offsets;
        }

        slider.on({
            scope    : me,
            dragstart: me.onSlide,
            drag     : me.onSlide,
            dragend  : me.hide,
            destroy  : me.destroy
        });
    },
<span id='Ext-slider-Tip-method-onSlide'>    /**
</span>     * @private
     * Called whenever a dragstart or drag event is received on the associated Thumb.
     * Aligns the Tip with the Thumb's new position.
     * @param {Ext.slider.MultiSlider} slider The slider
     * @param {Ext.EventObject} e The Event object
     * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
     */
    onSlide : function(slider, e, thumb) {
        var me = this;
        me.show();
        me.update(me.getText(thumb));
        me.el.alignTo(thumb.el, me.align, me.offsets);
    },

<span id='Ext-slider-Tip-method-getText'>    /**
</span>     * Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider
     * Thumb that the Tip is attached to. Override to customize.
     * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
     * @return {String} The text to display in the tip
     * @protected
     * @template
     */
    getText : function(thumb) {
        return String(thumb.value);
    }
});</pre>
</body>
</html>