Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Thumb.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5   <title>The source code</title>
6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
8   <style type="text/css">
9     .highlight { display: block; background-color: #ddd; }
10   </style>
11   <script type="text/javascript">
12     function highlight() {
13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
14     }
15   </script>
16 </head>
17 <body onload="prettyPrint(); highlight();">
18   <pre class="prettyprint lang-js"><span id='Ext-slider-Thumb'>/**
19 </span> * @class Ext.slider.Thumb
20  * @extends Ext.Base
21  * @private
22  * Represents a single thumb element on a Slider. This would not usually be created manually and would instead
23  * be created internally by an {@link Ext.slider.Multi Multi slider}.
24  */
25 Ext.define('Ext.slider.Thumb', {
26     requires: ['Ext.dd.DragTracker', 'Ext.util.Format'],
27 <span id='Ext-slider-Thumb-property-topThumbZIndex'>    /**
28 </span>     * @private
29      * @property {Number} topThumbZIndex
30      * The number used internally to set the z index of the top thumb (see promoteThumb for details)
31      */
32     topZIndex: 10000,
33
34 <span id='Ext-slider-Thumb-cfg-slider'>    /**
35 </span>     * @cfg {Ext.slider.MultiSlider} slider (required)
36      * The Slider to render to.
37      */
38
39 <span id='Ext-slider-Thumb-method-constructor'>    /**
40 </span>     * Creates new slider thumb.
41      * @param {Object} config (optional) Config object.
42      */
43     constructor: function(config) {
44         var me = this;
45
46 <span id='Ext-slider-Thumb-property-slider'>        /**
47 </span>         * @property {Ext.slider.MultiSlider} slider
48          * The slider this thumb is contained within
49          */
50         Ext.apply(me, config || {}, {
51             cls: Ext.baseCSSPrefix + 'slider-thumb',
52
53 <span id='Ext-slider-Thumb-cfg-constrain'>            /**
54 </span>             * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
55              */
56             constrain: false
57         });
58         me.callParent([config]);
59
60         if (me.slider.vertical) {
61             Ext.apply(me, Ext.slider.Thumb.Vertical);
62         }
63     },
64
65 <span id='Ext-slider-Thumb-method-render'>    /**
66 </span>     * Renders the thumb into a slider
67      */
68     render: function() {
69         var me = this;
70
71         me.el = me.slider.innerEl.insertFirst({cls: me.cls});
72         if (me.disabled) {
73             me.disable();
74         }
75         me.initEvents();
76     },
77
78 <span id='Ext-slider-Thumb-method-move'>    /**
79 </span>     * @private
80      * move the thumb
81      */
82     move: function(v, animate){
83         if(!animate){
84             this.el.setLeft(v);
85         }else{
86             Ext.create('Ext.fx.Anim', {
87                 target: this.el,
88                 duration: 350,
89                 to: {
90                     left: v
91                 }
92             });
93         }
94     },
95
96 <span id='Ext-slider-Thumb-method-bringToFront'>    /**
97 </span>     * @private
98      * Bring thumb dom element to front.
99      */
100     bringToFront: function() {
101         this.el.setStyle('zIndex', this.topZIndex);
102     },
103
104 <span id='Ext-slider-Thumb-method-sendToBack'>    /**
105 </span>     * @private
106      * Send thumb dom element to back.
107      */
108     sendToBack: function() {
109         this.el.setStyle('zIndex', '');
110     },
111
112 <span id='Ext-slider-Thumb-method-enable'>    /**
113 </span>     * Enables the thumb if it is currently disabled
114      */
115     enable: function() {
116         var me = this;
117
118         me.disabled = false;
119         if (me.el) {
120             me.el.removeCls(me.slider.disabledCls);
121         }
122     },
123
124 <span id='Ext-slider-Thumb-method-disable'>    /**
125 </span>     * Disables the thumb if it is currently enabled
126      */
127     disable: function() {
128         var me = this;
129
130         me.disabled = true;
131         if (me.el) {
132             me.el.addCls(me.slider.disabledCls);
133         }
134     },
135
136 <span id='Ext-slider-Thumb-method-initEvents'>    /**
137 </span>     * Sets up an Ext.dd.DragTracker for this thumb
138      */
139     initEvents: function() {
140         var me = this,
141             el = me.el;
142
143         me.tracker = Ext.create('Ext.dd.DragTracker', {
144             onBeforeStart: Ext.Function.bind(me.onBeforeDragStart, me),
145             onStart      : Ext.Function.bind(me.onDragStart, me),
146             onDrag       : Ext.Function.bind(me.onDrag, me),
147             onEnd        : Ext.Function.bind(me.onDragEnd, me),
148             tolerance    : 3,
149             autoStart    : 300,
150             overCls      : Ext.baseCSSPrefix + 'slider-thumb-over'
151         });
152
153         me.tracker.initEl(el);
154     },
155
156 <span id='Ext-slider-Thumb-method-onBeforeDragStart'>    /**
157 </span>     * @private
158      * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
159      * this returns false to disable the DragTracker too.
160      * @return {Boolean} False if the slider is currently disabled
161      */
162     onBeforeDragStart : function(e) {
163         if (this.disabled) {
164             return false;
165         } else {
166             this.slider.promoteThumb(this);
167             return true;
168         }
169     },
170
171 <span id='Ext-slider-Thumb-method-onDragStart'>    /**
172 </span>     * @private
173      * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
174      * to the thumb and fires the 'dragstart' event
175      */
176     onDragStart: function(e){
177         var me = this;
178
179         me.el.addCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
180         me.dragging = true;
181         me.dragStartValue = me.value;
182
183         me.slider.fireEvent('dragstart', me.slider, e, me);
184     },
185
186 <span id='Ext-slider-Thumb-method-onDrag'>    /**
187 </span>     * @private
188      * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
189      * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
190      */
191     onDrag: function(e) {
192         var me       = this,
193             slider   = me.slider,
194             index    = me.index,
195             newValue = me.getNewValue(),
196             above,
197             below;
198
199         if (me.constrain) {
200             above = slider.thumbs[index + 1];
201             below = slider.thumbs[index - 1];
202
203             if (below !== undefined &amp;&amp; newValue &lt;= below.value) {
204                 newValue = below.value;
205             }
206
207             if (above !== undefined &amp;&amp; newValue &gt;= above.value) {
208                 newValue = above.value;
209             }
210         }
211
212         slider.setValue(index, newValue, false);
213         slider.fireEvent('drag', slider, e, me);
214     },
215
216     getNewValue: function() {
217         var slider = this.slider,
218             pos = slider.innerEl.translatePoints(this.tracker.getXY());
219
220         return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision);
221     },
222
223 <span id='Ext-slider-Thumb-method-onDragEnd'>    /**
224 </span>     * @private
225      * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
226      * fires the 'changecomplete' event with the new value
227      */
228     onDragEnd: function(e) {
229         var me     = this,
230             slider = me.slider,
231             value  = me.value;
232
233         me.el.removeCls(Ext.baseCSSPrefix + 'slider-thumb-drag');
234
235         me.dragging = false;
236         slider.fireEvent('dragend', slider, e);
237
238         if (me.dragStartValue != value) {
239             slider.fireEvent('changecomplete', slider, value, me);
240         }
241     },
242
243     destroy: function() {
244         Ext.destroy(this.tracker);
245     },
246     statics: {
247         // Method overrides to support vertical dragging of thumb within slider
248         Vertical: {
249             getNewValue: function() {
250                 var slider   = this.slider,
251                     innerEl  = slider.innerEl,
252                     pos      = innerEl.translatePoints(this.tracker.getXY()),
253                     bottom   = innerEl.getHeight() - pos.top;
254
255                 return Ext.util.Format.round(slider.reverseValue(bottom), slider.decimalPrecision);
256             },
257             move: function(v, animate) {
258                 if (!animate) {
259                     this.el.setBottom(v);
260                 } else {
261                     Ext.create('Ext.fx.Anim', {
262                         target: this.el,
263                         duration: 350,
264                         to: {
265                             bottom: v
266                         }
267                     });
268                 }
269             }
270         }
271     }
272 });
273 </pre>
274 </body>
275 </html>