<!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',
|
<span id='Ext-slider-Tip-cfg-minWidth'> minWidth: 10,
|
</span> 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.util.Positionable#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.util.Positionable#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, "top", for vertical sliders, "left"]
|
* 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: '',
|
|
<span id='Ext-slider-Tip-property-defaultVerticalPosition'> defaultVerticalPosition: 'left',
|
</span>
|
<span id='Ext-slider-Tip-property-defaultHorizontalPosition'> defaultHorizontalPosition: 'top',
|
</span>
|
<span id='Ext-slider-Tip-property-isSliderTip'> isSliderTip: true,
|
</span>
|
<span id='Ext-slider-Tip-method-init'> init: function(slider) {
|
</span> 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>
|