Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / SliderTip.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.3.1
11  * Copyright(c) 2006-2010 Sencha Inc.
12  * licensing@sencha.com
13  * http://www.sencha.com/license
14  */
15 <div id="cls-Ext.slider.Tip"></div>/**
16  * @class Ext.slider.Tip
17  * @extends Ext.Tip
18  * Simple plugin for using an Ext.Tip with a slider to show the slider value. Example usage:
19 <pre>
20 new Ext.Slider({
21     width: 214,
22     minValue: 0,
23     maxValue: 100,
24     plugins: new Ext.slider.Tip()
25 });
26 </pre>
27  * Optionally provide your own tip text by overriding getText:
28  <pre>
29  new Ext.Slider({
30      width: 214,
31      minValue: 0,
32      maxValue: 100,
33      plugins: new Ext.slider.Tip({
34          getText: function(thumb){
35              return String.format('<b>{0}% complete</b>', thumb.value);
36          }
37      })
38  });
39  </pre>
40  */
41 Ext.slider.Tip = Ext.extend(Ext.Tip, {
42     minWidth: 10,
43     offsets : [0, -10],
44     
45     init: function(slider) {
46         slider.on({
47             scope    : this,
48             dragstart: this.onSlide,
49             drag     : this.onSlide,
50             dragend  : this.hide,
51             destroy  : this.destroy
52         });
53     },
54     
55     /**
56      * @private
57      * Called whenever a dragstart or drag event is received on the associated Thumb. 
58      * Aligns the Tip with the Thumb's new position.
59      * @param {Ext.slider.MultiSlider} slider The slider
60      * @param {Ext.EventObject} e The Event object
61      * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
62      */
63     onSlide : function(slider, e, thumb) {
64         this.show();
65         this.body.update(this.getText(thumb));
66         this.doAutoWidth();
67         this.el.alignTo(thumb.el, 'b-t?', this.offsets);
68     },
69
70     <div id="method-Ext.slider.Tip-getText"></div>/**
71      * Used to create the text that appears in the Tip's body. By default this just returns
72      * the value of the Slider Thumb that the Tip is attached to. Override to customize.
73      * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
74      * @return {String} The text to display in the tip
75      */
76     getText : function(thumb) {
77         return String(thumb.value);
78     }
79 });
80
81 //backwards compatibility - SliderTip used to be a ux before 3.2
82 Ext.ux.SliderTip = Ext.slider.Tip;</pre>    
83 </body>
84 </html>