Upgrade to ExtJS 4.0.1 - Released 05/18/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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../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> * @class Ext.slider.Tip
20  * @extends Ext.tip.Tip
21  * Simple plugin for using an Ext.tip.Tip with a slider to show the slider value. In general this
22  * class is not created directly, instead pass the {@link Ext.slider.Multi#useTips} and 
23  * {@link Ext.slider.Multi#tipText} configuration options to the slider directly.
24  * {@img Ext.slider.Tip/Ext.slider.Tip1.png Ext.slider.Tip component}
25  * Example usage:
26 &lt;pre&gt;
27     Ext.create('Ext.slider.Single', {
28         width: 214,
29         minValue: 0,
30         maxValue: 100,
31         useTips: true,
32         renderTo: Ext.getBody()
33     });   
34 &lt;/pre&gt;
35  * Optionally provide your own tip text by passing tipText:
36  &lt;pre&gt;
37  new Ext.slider.Single({
38      width: 214,
39      minValue: 0,
40      maxValue: 100,
41      useTips: true,
42      tipText: function(thumb){
43          return Ext.String.format('&lt;b&gt;{0}% complete&lt;/b&gt;', thumb.value);
44      }
45  });
46  &lt;/pre&gt;
47  * @xtype slidertip
48  */
49 Ext.define('Ext.slider.Tip', {
50     extend: 'Ext.tip.Tip',
51     minWidth: 10,
52     alias: 'widget.slidertip',
53     offsets : [0, -10],
54     
55     isSliderTip: true,
56
57     init: function(slider) {
58         var me = this;
59         
60         slider.on({
61             scope    : me,
62             dragstart: me.onSlide,
63             drag     : me.onSlide,
64             dragend  : me.hide,
65             destroy  : me.destroy
66         });
67     },
68 <span id='Ext-slider-Tip-method-onSlide'>    /**
69 </span>     * @private
70      * Called whenever a dragstart or drag event is received on the associated Thumb. 
71      * Aligns the Tip with the Thumb's new position.
72      * @param {Ext.slider.MultiSlider} slider The slider
73      * @param {Ext.EventObject} e The Event object
74      * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
75      */
76     onSlide : function(slider, e, thumb) {
77         var me = this;
78         me.show();
79         me.update(me.getText(thumb));
80         me.doComponentLayout();
81         me.el.alignTo(thumb.el, 'b-t?', me.offsets);
82     },
83
84 <span id='Ext-slider-Tip-method-getText'>    /**
85 </span>     * Used to create the text that appears in the Tip's body. By default this just returns
86      * the value of the Slider Thumb that the Tip is attached to. Override to customize.
87      * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
88      * @return {String} The text to display in the tip
89      */
90     getText : function(thumb) {
91         return String(thumb.value);
92     }
93 });</pre>
94 </body>
95 </html>