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