-<!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'>/**
-</span> * @class Ext.slider.Tip
- * @extends Ext.tip.Tip
- * 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.
- * {@img Ext.slider.Tip/Ext.slider.Tip1.png Ext.slider.Tip component}
- * Example usage:
-<pre>
- Ext.create('Ext.slider.Single', {
- width: 214,
- minValue: 0,
- maxValue: 100,
- useTips: true,
- renderTo: Ext.getBody()
- });
-</pre>
+<!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:
- <pre>
- new Ext.slider.Single({
- width: 214,
- minValue: 0,
- maxValue: 100,
- useTips: true,
- tipText: function(thumb){
- return Ext.String.format('<b>{0}% complete</b>', thumb.value);
- }
- });
- </pre>
- * @xtype slidertip
+ *
+ * @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',
offsets : [0, -10],
-
+
isSliderTip: true,
init: function(slider) {
var me = this;
-
+
slider.on({
scope : me,
dragstart: me.onSlide,
destroy : me.destroy
});
},
-<span id='Ext-slider.Tip-method-onSlide'> /**
+<span id='Ext-slider-Tip-method-onSlide'> /**
</span> * @private
- * Called whenever a dragstart or drag event is received on the associated Thumb.
+ * 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
me.el.alignTo(thumb.el, 'b-t?', 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.
+<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
*/
getText : function(thumb) {
return String(thumb.value);
}
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>