source:
trunk/workshop-routing-foss4g/web/ext/src/widgets/tips/SliderTip.js
@
81
Revision 76, 2.1 KB checked in by djay, 13 years ago (diff) | |
---|---|
|
Rev | Line | |
---|---|---|
[76] | 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.