Bienvenue sur PostGIS.fr

Bienvenue sur PostGIS.fr , le site de la communauté des utilisateurs francophones de PostGIS.

PostGIS ajoute le support d'objets géographique à la base de données PostgreSQL. En effet, PostGIS "spatialise" le serverur PostgreSQL, ce qui permet de l'utiliser comme une base de données SIG.

Maintenu à jour, en fonction de nos disponibilités et des diverses sorties des outils que nous testons, nous vous proposons l'ensemble de nos travaux publiés en langue française.

source: trunk/workshop-routing-foss4g/web/ext/src/widgets/Slider.js @ 76

Revision 76, 31.2 KB checked in by djay, 12 years ago (diff)

Ajout du répertoire web

  • Property svn:executable set to *
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.Thumb
9 * @extends Object
10 * Represents a single thumb element on a Slider. This would not usually be created manually and would instead
11 * be created internally by an {@link Ext.slider.MultiSlider Ext.Slider}.
12 */
13Ext.slider.Thumb = Ext.extend(Object, {
14   
15    /**
16     * True while the thumb is in a drag operation
17     * @type Boolean
18     */
19    dragging: false,
20
21    /**
22     * @constructor
23     * @cfg {Ext.slider.MultiSlider} slider The Slider to render to (required)
24     */
25    constructor: function(config) {
26        /**
27         * @property slider
28         * @type Ext.slider.MultiSlider
29         * The slider this thumb is contained within
30         */
31        Ext.apply(this, config || {}, {
32            cls: 'x-slider-thumb',
33
34            /**
35             * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
36             */
37            constrain: false
38        });
39
40        Ext.slider.Thumb.superclass.constructor.call(this, config);
41
42        if (this.slider.vertical) {
43            Ext.apply(this, Ext.slider.Thumb.Vertical);
44        }
45    },
46
47    /**
48     * Renders the thumb into a slider
49     */
50    render: function() {
51        this.el = this.slider.innerEl.insertFirst({cls: this.cls});
52
53        this.initEvents();
54    },
55
56    /**
57     * Enables the thumb if it is currently disabled
58     */
59    enable: function() {
60        this.disabled = false;
61        this.el.removeClass(this.slider.disabledClass);
62    },
63
64    /**
65     * Disables the thumb if it is currently enabled
66     */
67    disable: function() {
68        this.disabled = true;
69        this.el.addClass(this.slider.disabledClass);
70    },
71
72    /**
73     * Sets up an Ext.dd.DragTracker for this thumb
74     */
75    initEvents: function() {
76        var el = this.el;
77
78        el.addClassOnOver('x-slider-thumb-over');
79
80        this.tracker = new Ext.dd.DragTracker({
81            onBeforeStart: this.onBeforeDragStart.createDelegate(this),
82            onStart      : this.onDragStart.createDelegate(this),
83            onDrag       : this.onDrag.createDelegate(this),
84            onEnd        : this.onDragEnd.createDelegate(this),
85            tolerance    : 3,
86            autoStart    : 300
87        });
88
89        this.tracker.initEl(el);
90    },
91
92    /**
93     * @private
94     * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
95     * this returns false to disable the DragTracker too.
96     * @return {Boolean} False if the slider is currently disabled
97     */
98    onBeforeDragStart : function(e) {
99        if (this.disabled) {
100            return false;
101        } else {
102            this.slider.promoteThumb(this);
103            return true;
104        }
105    },
106
107    /**
108     * @private
109     * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
110     * to the thumb and fires the 'dragstart' event
111     */
112    onDragStart: function(e){
113        this.el.addClass('x-slider-thumb-drag');
114        this.dragging = true;
115        this.dragStartValue = this.value;
116
117        this.slider.fireEvent('dragstart', this.slider, e, this);
118    },
119
120    /**
121     * @private
122     * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
123     * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
124     */
125    onDrag: function(e) {
126        var slider   = this.slider,
127            index    = this.index,
128            newValue = this.getNewValue();
129
130        if (this.constrain) {
131            var above = slider.thumbs[index + 1],
132                below = slider.thumbs[index - 1];
133
134            if (below != undefined && newValue <= below.value) newValue = below.value;
135            if (above != undefined && newValue >= above.value) newValue = above.value;
136        }
137
138        slider.setValue(index, newValue, false);
139        slider.fireEvent('drag', slider, e, this);
140    },
141
142    getNewValue: function() {
143        var slider   = this.slider,
144            pos      = slider.innerEl.translatePoints(this.tracker.getXY());
145
146        return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision);
147    },
148
149    /**
150     * @private
151     * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
152     * fires the 'changecomplete' event with the new value
153     */
154    onDragEnd: function(e) {
155        var slider = this.slider,
156            value  = this.value;
157
158        this.el.removeClass('x-slider-thumb-drag');
159
160        this.dragging = false;
161        slider.fireEvent('dragend', slider, e);
162
163        if (this.dragStartValue != value) {
164            slider.fireEvent('changecomplete', slider, value, this);
165        }
166    },
167   
168    /**
169     * @private
170     * Destroys the thumb
171     */
172    destroy: function(){
173        Ext.destroyMembers(this, 'tracker', 'el');
174    }
175});
176
177/**
178 * @class Ext.slider.MultiSlider
179 * @extends Ext.BoxComponent
180 * Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container. Example usage:
181<pre>
182new Ext.Slider({
183    renderTo: Ext.getBody(),
184    width: 200,
185    value: 50,
186    increment: 10,
187    minValue: 0,
188    maxValue: 100
189});
190</pre>
191 * Sliders can be created with more than one thumb handle by passing an array of values instead of a single one:
192<pre>
193new Ext.Slider({
194    renderTo: Ext.getBody(),
195    width: 200,
196    values: [25, 50, 75],
197    minValue: 0,
198    maxValue: 100,
199
200    //this defaults to true, setting to false allows the thumbs to pass each other
201    {@link #constrainThumbs}: false
202});
203</pre>
204 */
205Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
206    /**
207     * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
208     */
209    /**
210     * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
211     */
212    vertical: false,
213    /**
214     * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
215     */
216    minValue: 0,
217    /**
218     * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
219     */
220    maxValue: 100,
221    /**
222     * @cfg {Number/Boolean} decimalPrecision.
223     * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>
224     * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
225     */
226    decimalPrecision: 0,
227    /**
228     * @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.
229     */
230    keyIncrement: 1,
231    /**
232     * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
233     */
234    increment: 0,
235
236    /**
237     * @private
238     * @property clickRange
239     * @type Array
240     * Determines whether or not a click to the slider component is considered to be a user request to change the value. Specified as an array of [top, bottom],
241     * the click event's 'top' property is compared to these numbers and the click only considered a change request if it falls within them. e.g. if the 'top'
242     * value of the click event is 4 or 16, the click is not considered a change request as it falls outside of the [5, 15] range
243     */
244    clickRange: [5,15],
245
246    /**
247     * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
248     */
249    clickToChange : true,
250    /**
251     * @cfg {Boolean} animate Turn on or off animation. Defaults to true
252     */
253    animate: true,
254    /**
255     * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true
256     */
257    constrainThumbs: true,
258
259    /**
260     * @private
261     * @property topThumbZIndex
262     * @type Number
263     * The number used internally to set the z index of the top thumb (see promoteThumb for details)
264     */
265    topThumbZIndex: 10000,
266
267    // private override
268    initComponent : function(){
269        if(!Ext.isDefined(this.value)){
270            this.value = this.minValue;
271        }
272
273        /**
274         * @property thumbs
275         * @type Array
276         * Array containing references to each thumb
277         */
278        this.thumbs = [];
279
280        Ext.slider.MultiSlider.superclass.initComponent.call(this);
281
282        this.keyIncrement = Math.max(this.increment, this.keyIncrement);
283        this.addEvents(
284            /**
285             * @event beforechange
286             * Fires before the slider value is changed. By returning false from an event handler,
287             * you can cancel the event and prevent the slider from changing.
288             * @param {Ext.slider.MultiSlider} slider The slider
289             * @param {Number} newValue The new value which the slider is being changed to.
290             * @param {Number} oldValue The old value which the slider was previously.
291             */
292            'beforechange',
293
294            /**
295             * @event change
296             * Fires when the slider value is changed.
297             * @param {Ext.slider.MultiSlider} slider The slider
298             * @param {Number} newValue The new value which the slider has been changed to.
299             * @param {Ext.slider.Thumb} thumb The thumb that was changed
300             */
301            'change',
302
303            /**
304             * @event changecomplete
305             * Fires when the slider value is changed by the user and any drag operations have completed.
306             * @param {Ext.slider.MultiSlider} slider The slider
307             * @param {Number} newValue The new value which the slider has been changed to.
308             * @param {Ext.slider.Thumb} thumb The thumb that was changed
309             */
310            'changecomplete',
311
312            /**
313             * @event dragstart
314             * Fires after a drag operation has started.
315             * @param {Ext.slider.MultiSlider} slider The slider
316             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
317             */
318            'dragstart',
319
320            /**
321             * @event drag
322             * Fires continuously during the drag operation while the mouse is moving.
323             * @param {Ext.slider.MultiSlider} slider The slider
324             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
325             */
326            'drag',
327
328            /**
329             * @event dragend
330             * Fires after the drag operation has completed.
331             * @param {Ext.slider.MultiSlider} slider The slider
332             * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
333             */
334            'dragend'
335        );
336
337        /**
338         * @property values
339         * @type Array
340         * Array of values to initalize the thumbs with
341         */
342        if (this.values == undefined || Ext.isEmpty(this.values)) this.values = [0];
343
344        var values = this.values;
345
346        for (var i=0; i < values.length; i++) {
347            this.addThumb(values[i]);
348        }
349
350        if(this.vertical){
351            Ext.apply(this, Ext.slider.Vertical);
352        }
353    },
354
355    /**
356     * Creates a new thumb and adds it to the slider
357     * @param {Number} value The initial value to set on the thumb. Defaults to 0
358     */
359    addThumb: function(value) {
360        var thumb = new Ext.slider.Thumb({
361            value    : value,
362            slider   : this,
363            index    : this.thumbs.length,
364            constrain: this.constrainThumbs
365        });
366        this.thumbs.push(thumb);
367
368        //render the thumb now if needed
369        if (this.rendered) thumb.render();
370    },
371
372    /**
373     * @private
374     * Moves the given thumb above all other by increasing its z-index. This is called when as drag
375     * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is
376     * required when the thumbs are stacked on top of each other at one of the ends of the slider's
377     * range, which can result in the user not being able to move any of them.
378     * @param {Ext.slider.Thumb} topThumb The thumb to move to the top
379     */
380    promoteThumb: function(topThumb) {
381        var thumbs = this.thumbs,
382            zIndex, thumb;
383
384        for (var i = 0, j = thumbs.length; i < j; i++) {
385            thumb = thumbs[i];
386
387            if (thumb == topThumb) {
388                zIndex = this.topThumbZIndex;
389            } else {
390                zIndex = '';
391            }
392
393            thumb.el.setStyle('zIndex', zIndex);
394        }
395    },
396
397    // private override
398    onRender : function() {
399        this.autoEl = {
400            cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
401            cn : {
402                cls: 'x-slider-end',
403                cn : {
404                    cls:'x-slider-inner',
405                    cn : [{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]
406                }
407            }
408        };
409
410        Ext.slider.MultiSlider.superclass.onRender.apply(this, arguments);
411
412        this.endEl   = this.el.first();
413        this.innerEl = this.endEl.first();
414        this.focusEl = this.innerEl.child('.x-slider-focus');
415
416        //render each thumb
417        for (var i=0; i < this.thumbs.length; i++) {
418            this.thumbs[i].render();
419        }
420
421        //calculate the size of half a thumb
422        var thumb      = this.innerEl.child('.x-slider-thumb');
423        this.halfThumb = (this.vertical ? thumb.getHeight() : thumb.getWidth()) / 2;
424
425        this.initEvents();
426    },
427
428    /**
429     * @private
430     * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.
431     * Creates a new DragTracker which is used to control what happens when the user drags the thumb around.
432     */
433    initEvents : function(){
434        this.mon(this.el, {
435            scope    : this,
436            mousedown: this.onMouseDown,
437            keydown  : this.onKeyDown
438        });
439
440        this.focusEl.swallowEvent("click", true);
441    },
442
443    /**
444     * @private
445     * Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',
446     * this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb
447     * @param {Ext.EventObject} e The click event
448     */
449    onMouseDown : function(e){
450        if(this.disabled){
451            return;
452        }
453
454        //see if the click was on any of the thumbs
455        var thumbClicked = false;
456        for (var i=0; i < this.thumbs.length; i++) {
457            thumbClicked = thumbClicked || e.target == this.thumbs[i].el.dom;
458        }
459
460        if (this.clickToChange && !thumbClicked) {
461            var local = this.innerEl.translatePoints(e.getXY());
462            this.onClickChange(local);
463        }
464        this.focus();
465    },
466
467    /**
468     * @private
469     * Moves the thumb to the indicated position. Note that a Vertical implementation is provided in Ext.slider.Vertical.
470     * Only changes the value if the click was within this.clickRange.
471     * @param {Object} local Object containing top and left values for the click event.
472     */
473    onClickChange : function(local) {
474        if (local.top > this.clickRange[0] && local.top < this.clickRange[1]) {
475            //find the nearest thumb to the click event
476            var thumb = this.getNearest(local, 'left'),
477                index = thumb.index;
478
479            this.setValue(index, Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
480        }
481    },
482
483    /**
484     * @private
485     * Returns the nearest thumb to a click event, along with its distance
486     * @param {Object} local Object containing top and left values from a click event
487     * @param {String} prop The property of local to compare on. Use 'left' for horizontal sliders, 'top' for vertical ones
488     * @return {Object} The closest thumb object and its distance from the click event
489     */
490    getNearest: function(local, prop) {
491        var localValue = prop == 'top' ? this.innerEl.getHeight() - local[prop] : local[prop],
492            clickValue = this.reverseValue(localValue),
493            nearestDistance = (this.maxValue - this.minValue) + 5, //add a small fudge for the end of the slider
494            index = 0,
495            nearest = null;
496
497        for (var i=0; i < this.thumbs.length; i++) {
498            var thumb = this.thumbs[i],
499                value = thumb.value,
500                dist  = Math.abs(value - clickValue);
501
502            if (Math.abs(dist <= nearestDistance)) {
503                nearest = thumb;
504                index = i;
505                nearestDistance = dist;
506            }
507        }
508        return nearest;
509    },
510
511    /**
512     * @private
513     * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right
514     * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction
515     * @param {Ext.EventObject} e The Event object
516     */
517    onKeyDown : function(e){
518        /*
519         * The behaviour for keyboard handling with multiple thumbs is currently undefined.
520         * There's no real sane default for it, so leave it like this until we come up
521         * with a better way of doing it.
522         */
523        if(this.disabled || this.thumbs.length !== 1){
524            e.preventDefault();
525            return;
526        }
527        var k = e.getKey(),
528            val;
529        switch(k){
530            case e.UP:
531            case e.RIGHT:
532                e.stopEvent();
533                val = e.ctrlKey ? this.maxValue : this.getValue(0) + this.keyIncrement;
534                this.setValue(0, val, undefined, true);
535            break;
536            case e.DOWN:
537            case e.LEFT:
538                e.stopEvent();
539                val = e.ctrlKey ? this.minValue : this.getValue(0) - this.keyIncrement;
540                this.setValue(0, val, undefined, true);
541            break;
542            default:
543                e.preventDefault();
544        }
545    },
546
547    /**
548     * @private
549     * If using snapping, this takes a desired new value and returns the closest snapped
550     * value to it
551     * @param {Number} value The unsnapped value
552     * @return {Number} The value of the nearest snap target
553     */
554    doSnap : function(value){
555        if (!(this.increment && value)) {
556            return value;
557        }
558        var newValue = value,
559            inc = this.increment,
560            m = value % inc;
561        if (m != 0) {
562            newValue -= m;
563            if (m * 2 >= inc) {
564                newValue += inc;
565            } else if (m * 2 < -inc) {
566                newValue -= inc;
567            }
568        }
569        return newValue.constrain(this.minValue,  this.maxValue);
570    },
571
572    // private
573    afterRender : function(){
574        Ext.slider.MultiSlider.superclass.afterRender.apply(this, arguments);
575
576        for (var i=0; i < this.thumbs.length; i++) {
577            var thumb = this.thumbs[i];
578
579            if (thumb.value !== undefined) {
580                var v = this.normalizeValue(thumb.value);
581
582                if (v !== thumb.value) {
583                    // delete this.value;
584                    this.setValue(i, v, false);
585                } else {
586                    this.moveThumb(i, this.translateValue(v), false);
587                }
588            }
589        };
590    },
591
592    /**
593     * @private
594     * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,
595     * the ratio is 2
596     * @return {Number} The ratio of pixels to mapped values
597     */
598    getRatio : function(){
599        var w = this.innerEl.getWidth(),
600            v = this.maxValue - this.minValue;
601        return v == 0 ? w : (w/v);
602    },
603
604    /**
605     * @private
606     * Returns a snapped, constrained value when given a desired value
607     * @param {Number} value Raw number value
608     * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values
609     */
610    normalizeValue : function(v){
611        v = this.doSnap(v);
612        v = Ext.util.Format.round(v, this.decimalPrecision);
613        v = v.constrain(this.minValue, this.maxValue);
614        return v;
615    },
616
617    /**
618     * Sets the minimum value for the slider instance. If the current value is less than the
619     * minimum value, the current value will be changed.
620     * @param {Number} val The new minimum value
621     */
622    setMinValue : function(val){
623        this.minValue = val;
624        var i = 0,
625            thumbs = this.thumbs,
626            len = thumbs.length,
627            t;
628           
629        for(; i < len; ++i){
630            t = thumbs[i];
631            t.value = t.value < val ? val : t.value;
632        }
633        this.syncThumb();
634    },
635
636    /**
637     * Sets the maximum value for the slider instance. If the current value is more than the
638     * maximum value, the current value will be changed.
639     * @param {Number} val The new maximum value
640     */
641    setMaxValue : function(val){
642        this.maxValue = val;
643        var i = 0,
644            thumbs = this.thumbs,
645            len = thumbs.length,
646            t;
647           
648        for(; i < len; ++i){
649            t = thumbs[i];
650            t.value = t.value > val ? val : t.value;
651        }
652        this.syncThumb();
653    },
654
655    /**
656     * Programmatically sets the value of the Slider. Ensures that the value is constrained within
657     * the minValue and maxValue.
658     * @param {Number} index Index of the thumb to move
659     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
660     * @param {Boolean} animate Turn on or off animation, defaults to true
661     */
662    setValue : function(index, v, animate, changeComplete) {
663        var thumb = this.thumbs[index],
664            el    = thumb.el;
665
666        v = this.normalizeValue(v);
667
668        if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value, thumb) !== false) {
669            thumb.value = v;
670            if(this.rendered){
671                this.moveThumb(index, this.translateValue(v), animate !== false);
672                this.fireEvent('change', this, v, thumb);
673                if(changeComplete){
674                    this.fireEvent('changecomplete', this, v, thumb);
675                }
676            }
677        }
678    },
679
680    /**
681     * @private
682     */
683    translateValue : function(v) {
684        var ratio = this.getRatio();
685        return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
686    },
687
688    /**
689     * @private
690     * Given a pixel location along the slider, returns the mapped slider value for that pixel.
691     * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50)
692     * returns 200
693     * @param {Number} pos The position along the slider to return a mapped value for
694     * @return {Number} The mapped value for the given position
695     */
696    reverseValue : function(pos){
697        var ratio = this.getRatio();
698        return (pos + (this.minValue * ratio)) / ratio;
699    },
700
701    /**
702     * @private
703     * @param {Number} index Index of the thumb to move
704     */
705    moveThumb: function(index, v, animate){
706        var thumb = this.thumbs[index].el;
707
708        if(!animate || this.animate === false){
709            thumb.setLeft(v);
710        }else{
711            thumb.shift({left: v, stopFx: true, duration:.35});
712        }
713    },
714
715    // private
716    focus : function(){
717        this.focusEl.focus(10);
718    },
719
720    // private
721    onResize : function(w, h){
722        var thumbs = this.thumbs,
723            len = thumbs.length,
724            i = 0;
725           
726        /*
727         * If we happen to be animating during a resize, the position of the thumb will likely be off
728         * when the animation stops. As such, just stop any animations before syncing the thumbs.
729         */
730        for(; i < len; ++i){
731            thumbs[i].el.stopFx();   
732        }
733        // check to see if we're using an auto width
734        if(Ext.isNumber(w)){
735            this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
736        }
737        this.syncThumb();
738        Ext.slider.MultiSlider.superclass.onResize.apply(this, arguments);
739    },
740
741    //private
742    onDisable: function(){
743        Ext.slider.MultiSlider.superclass.onDisable.call(this);
744
745        for (var i=0; i < this.thumbs.length; i++) {
746            var thumb = this.thumbs[i],
747                el    = thumb.el;
748
749            thumb.disable();
750
751            if(Ext.isIE){
752                //IE breaks when using overflow visible and opacity other than 1.
753                //Create a place holder for the thumb and display it.
754                var xy = el.getXY();
755                el.hide();
756
757                this.innerEl.addClass(this.disabledClass).dom.disabled = true;
758
759                if (!this.thumbHolder) {
760                    this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
761                }
762
763                this.thumbHolder.show().setXY(xy);
764            }
765        }
766    },
767
768    //private
769    onEnable: function(){
770        Ext.slider.MultiSlider.superclass.onEnable.call(this);
771
772        for (var i=0; i < this.thumbs.length; i++) {
773            var thumb = this.thumbs[i],
774                el    = thumb.el;
775
776            thumb.enable();
777
778            if (Ext.isIE) {
779                this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
780
781                if (this.thumbHolder) this.thumbHolder.hide();
782
783                el.show();
784                this.syncThumb();
785            }
786        }
787    },
788
789    /**
790     * Synchronizes the thumb position to the proper proportion of the total component width based
791     * on the current slider {@link #value}.  This will be called automatically when the Slider
792     * is resized by a layout, but if it is rendered auto width, this method can be called from
793     * another resize handler to sync the Slider if necessary.
794     */
795    syncThumb : function() {
796        if (this.rendered) {
797            for (var i=0; i < this.thumbs.length; i++) {
798                this.moveThumb(i, this.translateValue(this.thumbs[i].value));
799            }
800        }
801    },
802
803    /**
804     * Returns the current value of the slider
805     * @param {Number} index The index of the thumb to return a value for
806     * @return {Number} The current value of the slider
807     */
808    getValue : function(index) {
809        return this.thumbs[index].value;
810    },
811
812    /**
813     * Returns an array of values - one for the location of each thumb
814     * @return {Array} The set of thumb values
815     */
816    getValues: function() {
817        var values = [];
818
819        for (var i=0; i < this.thumbs.length; i++) {
820            values.push(this.thumbs[i].value);
821        }
822
823        return values;
824    },
825
826    // private
827    beforeDestroy : function(){
828        var thumbs = this.thumbs;
829        for(var i = 0, len = thumbs.length; i < len; ++i){
830            thumbs[i].destroy();
831            thumbs[i] = null;
832        }
833        Ext.destroyMembers(this, 'endEl', 'innerEl', 'focusEl', 'thumbHolder');
834        Ext.slider.MultiSlider.superclass.beforeDestroy.call(this);
835    }
836});
837
838Ext.reg('multislider', Ext.slider.MultiSlider);
839
840/**
841 * @class Ext.slider.SingleSlider
842 * @extends Ext.slider.MultiSlider
843 * Slider which supports vertical or horizontal orientation, keyboard adjustments,
844 * configurable snapping, axis clicking and animation. Can be added as an item to
845 * any container. Example usage:
846<pre><code>
847new Ext.slider.SingleSlider({
848    renderTo: Ext.getBody(),
849    width: 200,
850    value: 50,
851    increment: 10,
852    minValue: 0,
853    maxValue: 100
854});
855</code></pre>
856 * The class Ext.slider.SingleSlider is aliased to Ext.Slider for backwards compatibility.
857 */
858Ext.slider.SingleSlider = Ext.extend(Ext.slider.MultiSlider, {
859    constructor: function(config) {
860      config = config || {};
861
862      Ext.applyIf(config, {
863          values: [config.value || 0]
864      });
865
866      Ext.slider.SingleSlider.superclass.constructor.call(this, config);
867    },
868
869    /**
870     * Returns the current value of the slider
871     * @return {Number} The current value of the slider
872     */
873    getValue: function() {
874        //just returns the value of the first thumb, which should be the only one in a single slider
875        return Ext.slider.SingleSlider.superclass.getValue.call(this, 0);
876    },
877
878    /**
879     * Programmatically sets the value of the Slider. Ensures that the value is constrained within
880     * the minValue and maxValue.
881     * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
882     * @param {Boolean} animate Turn on or off animation, defaults to true
883     */
884    setValue: function(value, animate) {
885        var args = Ext.toArray(arguments),
886            len  = args.length;
887
888        //this is to maintain backwards compatiblity for sliders with only one thunb. Usually you must pass the thumb
889        //index to setValue, but if we only have one thumb we inject the index here first if given the multi-slider
890        //signature without the required index. The index will always be 0 for a single slider
891        if (len == 1 || (len <= 3 && typeof arguments[1] != 'number')) {
892            args.unshift(0);
893        }
894
895        return Ext.slider.SingleSlider.superclass.setValue.apply(this, args);
896    },
897
898    /**
899     * Synchronizes the thumb position to the proper proportion of the total component width based
900     * on the current slider {@link #value}.  This will be called automatically when the Slider
901     * is resized by a layout, but if it is rendered auto width, this method can be called from
902     * another resize handler to sync the Slider if necessary.
903     */
904    syncThumb : function() {
905        return Ext.slider.SingleSlider.superclass.syncThumb.apply(this, [0].concat(arguments));
906    },
907   
908    // private
909    getNearest : function(){
910        // Since there's only 1 thumb, it's always the nearest
911        return this.thumbs[0];   
912    }
913});
914
915//backwards compatibility
916Ext.Slider = Ext.slider.SingleSlider;
917
918Ext.reg('slider', Ext.slider.SingleSlider);
919
920// private class to support vertical sliders
921Ext.slider.Vertical = {
922    onResize : function(w, h){
923        this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
924        this.syncThumb();
925    },
926
927    getRatio : function(){
928        var h = this.innerEl.getHeight(),
929            v = this.maxValue - this.minValue;
930        return h/v;
931    },
932
933    moveThumb: function(index, v, animate) {
934        var thumb = this.thumbs[index],
935            el    = thumb.el;
936
937        if (!animate || this.animate === false) {
938            el.setBottom(v);
939        } else {
940            el.shift({bottom: v, stopFx: true, duration:.35});
941        }
942    },
943
944    onClickChange : function(local) {
945        if (local.left > this.clickRange[0] && local.left < this.clickRange[1]) {
946            var thumb = this.getNearest(local, 'top'),
947                index = thumb.index,
948                value = this.minValue + this.reverseValue(this.innerEl.getHeight() - local.top);
949
950            this.setValue(index, Ext.util.Format.round(value, this.decimalPrecision), undefined, true);
951        }
952    }
953};
954
955//private class to support vertical dragging of thumbs within a slider
956Ext.slider.Thumb.Vertical = {
957    getNewValue: function() {
958        var slider   = this.slider,
959            innerEl  = slider.innerEl,
960            pos      = innerEl.translatePoints(this.tracker.getXY()),
961            bottom   = innerEl.getHeight() - pos.top;
962
963        return slider.minValue + Ext.util.Format.round(bottom / slider.getRatio(), slider.decimalPrecision);
964    }
965};
Note: See TracBrowser for help on using the repository browser.