Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / 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>