3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.slider.Thumb
19 * Represents a single thumb element on a Slider. This would not usually be created manually and would instead
20 * be created internally by an {@link Ext.slider.Multi Multi slider}.
22 Ext.define('Ext.slider.Thumb', {
23 requires: ['Ext.dd.DragTracker', 'Ext.util.Format'],
26 * @property {Number} topThumbZIndex
27 * The number used internally to set the z index of the top thumb (see promoteThumb for details)
32 * @cfg {Ext.slider.MultiSlider} slider (required)
33 * The Slider to render to.
37 * Creates new slider thumb.
38 * @param {Object} config (optional) Config object.
40 constructor: function(config) {
44 * @property {Ext.slider.MultiSlider} slider
45 * The slider this thumb is contained within
47 Ext.apply(me, config || {}, {
48 cls: Ext.baseCSSPrefix + 'slider-thumb',
51 * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
55 me.callParent([config]);
57 if (me.slider.vertical) {
58 Ext.apply(me, Ext.slider.Thumb.Vertical);
63 * Renders the thumb into a slider
68 me.el = me.slider.innerEl.insertFirst({cls: me.cls});
79 move: function(v, animate){
83 Ext.create('Ext.fx.Anim', {
95 * Bring thumb dom element to front.
97 bringToFront: function() {
98 this.el.setStyle('zIndex', this.topZIndex);
103 * Send thumb dom element to back.
105 sendToBack: function() {
106 this.el.setStyle('zIndex', '');
110 * Enables the thumb if it is currently disabled
117 me.el.removeCls(me.slider.disabledCls);
122 * Disables the thumb if it is currently enabled
124 disable: function() {
129 me.el.addCls(me.slider.disabledCls);
134 * Sets up an Ext.dd.DragTracker for this thumb
136 initEvents: function() {
140 me.tracker = Ext.create('Ext.dd.DragTracker', {
141 onBeforeStart: Ext.Function.bind(me.onBeforeDragStart, me),
142 onStart : Ext.Function.bind(me.onDragStart, me),
143 onDrag : Ext.Function.bind(me.onDrag, me),
144 onEnd : Ext.Function.bind(me.onDragEnd, me),
147 overCls : Ext.baseCSSPrefix + 'slider-thumb-over'
150 me.tracker.initEl(el);
155 * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
156 * this returns false to disable the DragTracker too.
157 * @return {Boolean} False if the slider is currently disabled
159 onBeforeDragStart : function(e) {
163 this.slider.promoteThumb(this);
170 * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
171 * to the thumb and fires the 'dragstart' event
173 onDragStart: function(e){
176 me.el.addCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
178 me.dragStartValue = me.value;
180 me.slider.fireEvent('dragstart', me.slider, e, me);
185 * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
186 * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
188 onDrag: function(e) {
192 newValue = me.getNewValue(),
197 above = slider.thumbs[index + 1];
198 below = slider.thumbs[index - 1];
200 if (below !== undefined && newValue <= below.value) {
201 newValue = below.value;
204 if (above !== undefined && newValue >= above.value) {
205 newValue = above.value;
209 slider.setValue(index, newValue, false);
210 slider.fireEvent('drag', slider, e, me);
213 getNewValue: function() {
214 var slider = this.slider,
215 pos = slider.innerEl.translatePoints(this.tracker.getXY());
217 return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision);
222 * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
223 * fires the 'changecomplete' event with the new value
225 onDragEnd: function(e) {
230 me.el.removeCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
233 slider.fireEvent('dragend', slider, e);
235 if (me.dragStartValue != value) {
236 slider.fireEvent('changecomplete', slider, value, me);
240 destroy: function() {
241 Ext.destroy(this.tracker);
244 // Method overrides to support vertical dragging of thumb within slider
246 getNewValue: function() {
247 var slider = this.slider,
248 innerEl = slider.innerEl,
249 pos = innerEl.translatePoints(this.tracker.getXY()),
250 bottom = innerEl.getHeight() - pos.top;
252 return Ext.util.Format.round(slider.reverseValue(bottom), slider.decimalPrecision);
254 move: function(v, animate) {
256 this.el.setBottom(v);
258 Ext.create('Ext.fx.Anim', {