slider.js
2.08 KB
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
85
86
87
88
89
90
91
92
93
94
/*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
new Ext.Slider({
renderTo: 'basic-slider',
width: 214,
minValue: 0,
maxValue: 100
});
new Ext.Slider({
renderTo: 'increment-slider',
width: 214,
value:50,
increment: 10,
minValue: 0,
maxValue: 100
});
new Ext.Slider({
renderTo: 'vertical-slider',
height: 214,
vertical: true,
minValue: 0,
maxValue: 100
});
new Ext.Slider({
renderTo: 'tip-slider',
width: 214,
minValue: 0,
maxValue: 100,
plugins: new Ext.ux.SliderTip()
});
var tip = new Ext.ux.SliderTip({
getText: function(slider){
return String.format('<b>{0}% complete</b>', slider.getValue());
}
});
new Ext.Slider({
renderTo: 'custom-tip-slider',
width: 214,
increment: 10,
minValue: 0,
maxValue: 100,
plugins: tip
});
new Ext.Slider({
renderTo: 'custom-slider',
width: 214,
increment: 10,
minValue: 0,
maxValue: 100,
plugins: new Ext.ux.SliderTip()
});
});
/**
* @class Ext.ux.SliderTip
* @extends Ext.Tip
* Simple plugin for using an Ext.Tip with a slider to show the slider value
*/
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
minWidth: 10,
offsets : [0, -10],
init : function(slider){
slider.on('dragstart', this.onSlide, this);
slider.on('drag', this.onSlide, this);
slider.on('dragend', this.hide, this);
slider.on('destroy', this.destroy, this);
},
onSlide : function(slider){
this.show();
this.body.update(this.getText(slider));
this.doAutoWidth();
this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
},
getText : function(slider){
return slider.getValue();
}
});