source:
trunk/workshop-routing-foss4g/web/ext/src/widgets/tips/SliderTip.js
@
77
Revision 76, 2.1 KB checked in by djay, 13 years ago (diff) | |
---|---|
|
Line | |
---|---|
1 | /*! |
2 | * Ext JS Library 3.4.0 |
3 | * Copyright(c) 2006-2011 Sencha Inc. |
4 | * licensing@sencha.com |
5 | * http://www.sencha.com/license |
6 | */ |
7 | /** |
8 | * @class Ext.slider.Tip |
9 | * @extends Ext.Tip |
10 | * Simple plugin for using an Ext.Tip with a slider to show the slider value. Example usage: |
11 | <pre> |
12 | new Ext.Slider({ |
13 | width: 214, |
14 | minValue: 0, |
15 | maxValue: 100, |
16 | plugins: new Ext.slider.Tip() |
17 | }); |
18 | </pre> |
19 | * Optionally provide your own tip text by overriding getText: |
20 | <pre> |
21 | new Ext.Slider({ |
22 | width: 214, |
23 | minValue: 0, |
24 | maxValue: 100, |
25 | plugins: new Ext.slider.Tip({ |
26 | getText: function(thumb){ |
27 | return String.format('<b>{0}% complete</b>', thumb.value); |
28 | } |
29 | }) |
30 | }); |
31 | </pre> |
32 | */ |
33 | Ext.slider.Tip = Ext.extend(Ext.Tip, { |
34 | minWidth: 10, |
35 | offsets : [0, -10], |
36 | |
37 | init: function(slider) { |
38 | slider.on({ |
39 | scope : this, |
40 | dragstart: this.onSlide, |
41 | drag : this.onSlide, |
42 | dragend : this.hide, |
43 | destroy : this.destroy |
44 | }); |
45 | }, |
46 | |
47 | /** |
48 | * @private |
49 | * Called whenever a dragstart or drag event is received on the associated Thumb. |
50 | * Aligns the Tip with the Thumb's new position. |
51 | * @param {Ext.slider.MultiSlider} slider The slider |
52 | * @param {Ext.EventObject} e The Event object |
53 | * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to |
54 | */ |
55 | onSlide : function(slider, e, thumb) { |
56 | this.show(); |
57 | this.body.update(this.getText(thumb)); |
58 | this.doAutoWidth(); |
59 | this.el.alignTo(thumb.el, 'b-t?', this.offsets); |
60 | }, |
61 | |
62 | /** |
63 | * Used to create the text that appears in the Tip's body. By default this just returns |
64 | * the value of the Slider Thumb that the Tip is attached to. Override to customize. |
65 | * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to |
66 | * @return {String} The text to display in the tip |
67 | */ |
68 | getText : function(thumb) { |
69 | return String(thumb.value); |
70 | } |
71 | }); |
72 | |
73 | //backwards compatibility - SliderTip used to be a ux before 3.2 |
74 | Ext.ux.SliderTip = Ext.slider.Tip; |
Note: See TracBrowser
for help on using the repository browser.