3 <title>The source code</title>
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 <body onload="prettyPrint();">
8 <pre class="prettyprint lang-js">/*!
10 * Copyright(c) 2006-2009 Ext JS, LLC
12 * http://www.extjs.com/license
14 <div id="cls-Ext.Slider"></div>/**
\r
16 * @extends Ext.BoxComponent
\r
17 * Slider which supports vertical or horizontal orientation, keyboard adjustments,
\r
18 * configurable snapping, axis clicking and animation. Can be added as an item to
\r
19 * any container. Example usage:
\r
22 renderTo: Ext.getBody(),
\r
31 Ext.Slider = Ext.extend(Ext.BoxComponent, {
\r
32 <div id="cfg-Ext.Slider-value"></div>/**
\r
33 * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
\r
35 <div id="cfg-Ext.Slider-vertical"></div>/**
\r
36 * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
\r
39 <div id="cfg-Ext.Slider-minValue"></div>/**
\r
40 * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
\r
43 <div id="cfg-Ext.Slider-maxValue"></div>/**
\r
44 * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
\r
47 <div id="cfg-Ext.Slider-decimalPrecision."></div>/**
\r
48 * @cfg {Number/Boolean} decimalPrecision.
\r
49 * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>
\r
50 * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
\r
52 decimalPrecision: 0,
\r
53 <div id="cfg-Ext.Slider-keyIncrement"></div>/**
\r
54 * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.
\r
57 <div id="cfg-Ext.Slider-increment"></div>/**
\r
58 * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
\r
63 <div id="cfg-Ext.Slider-clickToChange"></div>/**
\r
64 * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
\r
66 clickToChange : true,
\r
67 <div id="cfg-Ext.Slider-animate"></div>/**
\r
68 * @cfg {Boolean} animate Turn on or off animation. Defaults to true
\r
72 <div id="prop-Ext.Slider-dragging"></div>/**
\r
73 * True while the thumb is in a drag operation
\r
79 initComponent : function(){
\r
80 if(!Ext.isDefined(this.value)){
\r
81 this.value = this.minValue;
\r
83 Ext.Slider.superclass.initComponent.call(this);
\r
84 this.keyIncrement = Math.max(this.increment, this.keyIncrement);
\r
86 <div id="event-Ext.Slider-beforechange"></div>/**
\r
87 * @event beforechange
\r
88 * Fires before the slider value is changed. By returning false from an event handler,
\r
89 * you can cancel the event and prevent the slider from changing.
\r
90 * @param {Ext.Slider} slider The slider
\r
91 * @param {Number} newValue The new value which the slider is being changed to.
\r
92 * @param {Number} oldValue The old value which the slider was previously.
\r
95 <div id="event-Ext.Slider-change"></div>/**
\r
97 * Fires when the slider value is changed.
\r
98 * @param {Ext.Slider} slider The slider
\r
99 * @param {Number} newValue The new value which the slider has been changed to.
\r
102 <div id="event-Ext.Slider-changecomplete"></div>/**
\r
103 * @event changecomplete
\r
104 * Fires when the slider value is changed by the user and any drag operations have completed.
\r
105 * @param {Ext.Slider} slider The slider
\r
106 * @param {Number} newValue The new value which the slider has been changed to.
\r
109 <div id="event-Ext.Slider-dragstart"></div>/**
\r
111 * Fires after a drag operation has started.
\r
112 * @param {Ext.Slider} slider The slider
\r
113 * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
\r
116 <div id="event-Ext.Slider-drag"></div>/**
\r
118 * Fires continuously during the drag operation while the mouse is moving.
\r
119 * @param {Ext.Slider} slider The slider
\r
120 * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
\r
123 <div id="event-Ext.Slider-dragend"></div>/**
\r
125 * Fires after the drag operation has completed.
\r
126 * @param {Ext.Slider} slider The slider
\r
127 * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
\r
133 Ext.apply(this, Ext.Slider.Vertical);
\r
137 // private override
\r
138 onRender : function(){
\r
140 cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
\r
141 cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}}
\r
143 Ext.Slider.superclass.onRender.apply(this, arguments);
\r
144 this.endEl = this.el.first();
\r
145 this.innerEl = this.endEl.first();
\r
146 this.thumb = this.innerEl.first();
\r
147 this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;
\r
148 this.focusEl = this.thumb.next();
\r
152 // private override
\r
153 initEvents : function(){
\r
154 this.thumb.addClassOnOver('x-slider-thumb-over');
\r
155 this.mon(this.el, {
\r
157 mousedown: this.onMouseDown,
\r
158 keydown: this.onKeyDown
\r
161 this.focusEl.swallowEvent("click", true);
\r
163 this.tracker = new Ext.dd.DragTracker({
\r
164 onBeforeStart: this.onBeforeDragStart.createDelegate(this),
\r
165 onStart: this.onDragStart.createDelegate(this),
\r
166 onDrag: this.onDrag.createDelegate(this),
\r
167 onEnd: this.onDragEnd.createDelegate(this),
\r
171 this.tracker.initEl(this.thumb);
\r
172 this.on('beforedestroy', this.tracker.destroy, this.tracker);
\r
175 // private override
\r
176 onMouseDown : function(e){
\r
177 if(this.disabled) {return;}
\r
178 if(this.clickToChange && e.target != this.thumb.dom){
\r
179 var local = this.innerEl.translatePoints(e.getXY());
\r
180 this.onClickChange(local);
\r
186 onClickChange : function(local){
\r
187 if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){
\r
188 this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
\r
193 onKeyDown : function(e){
\r
194 if(this.disabled){e.preventDefault();return;}
\r
195 var k = e.getKey();
\r
201 this.setValue(this.maxValue, undefined, true);
\r
203 this.setValue(this.value+this.keyIncrement, undefined, true);
\r
210 this.setValue(this.minValue, undefined, true);
\r
212 this.setValue(this.value-this.keyIncrement, undefined, true);
\r
216 e.preventDefault();
\r
221 doSnap : function(value){
\r
222 if(!this.increment || this.increment == 1 || !value) {
\r
225 var newValue = value, inc = this.increment;
\r
226 var m = value % inc;
\r
231 }else if(m * 2 < -inc){
\r
235 return newValue.constrain(this.minValue, this.maxValue);
\r
239 afterRender : function(){
\r
240 Ext.Slider.superclass.afterRender.apply(this, arguments);
\r
241 if(this.value !== undefined){
\r
242 var v = this.normalizeValue(this.value);
\r
243 if(v !== this.value){
\r
245 this.setValue(v, false);
\r
247 this.moveThumb(this.translateValue(v), false);
\r
253 getRatio : function(){
\r
254 var w = this.innerEl.getWidth();
\r
255 var v = this.maxValue - this.minValue;
\r
256 return v == 0 ? w : (w/v);
\r
260 normalizeValue : function(v){
\r
261 v = this.doSnap(v);
\r
262 v = Ext.util.Format.round(v, this.decimalPrecision);
\r
263 v = v.constrain(this.minValue, this.maxValue);
\r
267 <div id="method-Ext.Slider-setValue"></div>/**
\r
268 * Programmatically sets the value of the Slider. Ensures that the value is constrained within
\r
269 * the minValue and maxValue.
\r
270 * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
\r
271 * @param {Boolean} animate Turn on or off animation, defaults to true
\r
273 setValue : function(v, animate, changeComplete){
\r
274 v = this.normalizeValue(v);
\r
275 if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
\r
277 this.moveThumb(this.translateValue(v), animate !== false);
\r
278 this.fireEvent('change', this, v);
\r
279 if(changeComplete){
\r
280 this.fireEvent('changecomplete', this, v);
\r
286 translateValue : function(v){
\r
287 var ratio = this.getRatio();
\r
288 return (v * ratio)-(this.minValue * ratio)-this.halfThumb;
\r
291 reverseValue : function(pos){
\r
292 var ratio = this.getRatio();
\r
293 return (pos+this.halfThumb+(this.minValue * ratio))/ratio;
\r
297 moveThumb: function(v, animate){
\r
298 if(!animate || this.animate === false){
\r
299 this.thumb.setLeft(v);
\r
301 this.thumb.shift({left: v, stopFx: true, duration:.35});
\r
306 focus : function(){
\r
307 this.focusEl.focus(10);
\r
311 onBeforeDragStart : function(e){
\r
312 return !this.disabled;
\r
316 onDragStart: function(e){
\r
317 this.thumb.addClass('x-slider-thumb-drag');
\r
318 this.dragging = true;
\r
319 this.dragStartValue = this.value;
\r
320 this.fireEvent('dragstart', this, e);
\r
324 onDrag: function(e){
\r
325 var pos = this.innerEl.translatePoints(this.tracker.getXY());
\r
326 this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);
\r
327 this.fireEvent('drag', this, e);
\r
331 onDragEnd: function(e){
\r
332 this.thumb.removeClass('x-slider-thumb-drag');
\r
333 this.dragging = false;
\r
334 this.fireEvent('dragend', this, e);
\r
335 if(this.dragStartValue != this.value){
\r
336 this.fireEvent('changecomplete', this, this.value);
\r
341 onResize : function(w, h){
\r
342 this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
\r
347 onDisable: function(){
\r
348 Ext.Slider.superclass.onDisable.call(this);
\r
349 this.thumb.addClass(this.disabledClass);
\r
351 //IE breaks when using overflow visible and opacity other than 1.
\r
352 //Create a place holder for the thumb and display it.
\r
353 var xy = this.thumb.getXY();
\r
355 this.innerEl.addClass(this.disabledClass).dom.disabled = true;
\r
356 if (!this.thumbHolder){
\r
357 this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
\r
359 this.thumbHolder.show().setXY(xy);
\r
364 onEnable: function(){
\r
365 Ext.Slider.superclass.onEnable.call(this);
\r
366 this.thumb.removeClass(this.disabledClass);
\r
368 this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
\r
369 if (this.thumbHolder){
\r
370 this.thumbHolder.hide();
\r
377 <div id="method-Ext.Slider-syncThumb"></div>/**
\r
378 * Synchronizes the thumb position to the proper proportion of the total component width based
\r
379 * on the current slider {@link #value}. This will be called automatically when the Slider
\r
380 * is resized by a layout, but if it is rendered auto width, this method can be called from
\r
381 * another resize handler to sync the Slider if necessary.
\r
383 syncThumb : function(){
\r
385 this.moveThumb(this.translateValue(this.value));
\r
389 <div id="method-Ext.Slider-getValue"></div>/**
\r
390 * Returns the current value of the slider
\r
391 * @return {Number} The current value of the slider
\r
393 getValue : function(){
\r
397 Ext.reg('slider', Ext.Slider);
\r
399 // private class to support vertical sliders
\r
400 Ext.Slider.Vertical = {
\r
401 onResize : function(w, h){
\r
402 this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
\r
406 getRatio : function(){
\r
407 var h = this.innerEl.getHeight();
\r
408 var v = this.maxValue - this.minValue;
\r
412 moveThumb: function(v, animate){
\r
413 if(!animate || this.animate === false){
\r
414 this.thumb.setBottom(v);
\r
416 this.thumb.shift({bottom: v, stopFx: true, duration:.35});
\r
420 onDrag: function(e){
\r
421 var pos = this.innerEl.translatePoints(this.tracker.getXY());
\r
422 var bottom = this.innerEl.getHeight()-pos.top;
\r
423 this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false);
\r
424 this.fireEvent('drag', this, e);
\r
427 onClickChange : function(local){
\r
428 if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){
\r
429 var bottom = this.innerEl.getHeight()-local.top;
\r
430 this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true);
\r