Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / ClickRepeater.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-util-ClickRepeater'>/**
19 </span> * @class Ext.util.ClickRepeater
20  * @extends Ext.util.Observable
21  *
22  * A wrapper class which can be applied to any element. Fires a &quot;click&quot; event while the
23  * mouse is pressed. The interval between firings may be specified in the config but
24  * defaults to 20 milliseconds.
25  *
26  * Optionally, a CSS class may be applied to the element during the time it is pressed.
27  *
28  */
29 Ext.define('Ext.util.ClickRepeater', {
30     extend: 'Ext.util.Observable',
31
32 <span id='Ext-util-ClickRepeater-method-constructor'>    /**
33 </span>     * Creates new ClickRepeater.
34      * @param {String/HTMLElement/Ext.Element} el The element or its ID to listen on
35      * @param {Object} config (optional) Config object.
36      */
37     constructor : function(el, config){
38         this.el = Ext.get(el);
39         this.el.unselectable();
40
41         Ext.apply(this, config);
42
43         this.addEvents(
44 <span id='Ext-util-ClickRepeater-event-mousedown'>        /**
45 </span>         * @event mousedown
46          * Fires when the mouse button is depressed.
47          * @param {Ext.util.ClickRepeater} this
48          * @param {Ext.EventObject} e
49          */
50         &quot;mousedown&quot;,
51 <span id='Ext-util-ClickRepeater-event-click'>        /**
52 </span>         * @event click
53          * Fires on a specified interval during the time the element is pressed.
54          * @param {Ext.util.ClickRepeater} this
55          * @param {Ext.EventObject} e
56          */
57         &quot;click&quot;,
58 <span id='Ext-util-ClickRepeater-event-mouseup'>        /**
59 </span>         * @event mouseup
60          * Fires when the mouse key is released.
61          * @param {Ext.util.ClickRepeater} this
62          * @param {Ext.EventObject} e
63          */
64         &quot;mouseup&quot;
65         );
66
67         if(!this.disabled){
68             this.disabled = true;
69             this.enable();
70         }
71
72         // allow inline handler
73         if(this.handler){
74             this.on(&quot;click&quot;, this.handler,  this.scope || this);
75         }
76
77         this.callParent();
78     },
79
80 <span id='Ext-util-ClickRepeater-cfg-el'>    /**
81 </span>     * @cfg {String/HTMLElement/Ext.Element} el The element to act as a button.
82      */
83
84 <span id='Ext-util-ClickRepeater-cfg-pressedCls'>    /**
85 </span>     * @cfg {String} pressedCls A CSS class name to be applied to the element while pressed.
86      */
87
88 <span id='Ext-util-ClickRepeater-cfg-accelerate'>    /**
89 </span>     * @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
90      * &quot;interval&quot; and &quot;delay&quot; are ignored.
91      */
92
93 <span id='Ext-util-ClickRepeater-cfg-interval'>    /**
94 </span>     * @cfg {Number} interval The interval between firings of the &quot;click&quot; event. Default 20 ms.
95      */
96     interval : 20,
97
98 <span id='Ext-util-ClickRepeater-cfg-delay'>    /**
99 </span>     * @cfg {Number} delay The initial delay before the repeating event begins firing.
100      * Similar to an autorepeat key delay.
101      */
102     delay: 250,
103
104 <span id='Ext-util-ClickRepeater-cfg-preventDefault'>    /**
105 </span>     * @cfg {Boolean} preventDefault True to prevent the default click event
106      */
107     preventDefault : true,
108 <span id='Ext-util-ClickRepeater-cfg-stopDefault'>    /**
109 </span>     * @cfg {Boolean} stopDefault True to stop the default click event
110      */
111     stopDefault : false,
112
113     timer : 0,
114
115 <span id='Ext-util-ClickRepeater-method-enable'>    /**
116 </span>     * Enables the repeater and allows events to fire.
117      */
118     enable: function(){
119         if(this.disabled){
120             this.el.on('mousedown', this.handleMouseDown, this);
121             if (Ext.isIE){
122                 this.el.on('dblclick', this.handleDblClick, this);
123             }
124             if(this.preventDefault || this.stopDefault){
125                 this.el.on('click', this.eventOptions, this);
126             }
127         }
128         this.disabled = false;
129     },
130
131 <span id='Ext-util-ClickRepeater-method-disable'>    /**
132 </span>     * Disables the repeater and stops events from firing.
133      */
134     disable: function(/* private */ force){
135         if(force || !this.disabled){
136             clearTimeout(this.timer);
137             if(this.pressedCls){
138                 this.el.removeCls(this.pressedCls);
139             }
140             Ext.getDoc().un('mouseup', this.handleMouseUp, this);
141             this.el.removeAllListeners();
142         }
143         this.disabled = true;
144     },
145
146 <span id='Ext-util-ClickRepeater-method-setDisabled'>    /**
147 </span>     * Convenience function for setting disabled/enabled by boolean.
148      * @param {Boolean} disabled
149      */
150     setDisabled: function(disabled){
151         this[disabled ? 'disable' : 'enable']();
152     },
153
154     eventOptions: function(e){
155         if(this.preventDefault){
156             e.preventDefault();
157         }
158         if(this.stopDefault){
159             e.stopEvent();
160         }
161     },
162
163     // private
164     destroy : function() {
165         this.disable(true);
166         Ext.destroy(this.el);
167         this.clearListeners();
168     },
169
170     handleDblClick : function(e){
171         clearTimeout(this.timer);
172         this.el.blur();
173
174         this.fireEvent(&quot;mousedown&quot;, this, e);
175         this.fireEvent(&quot;click&quot;, this, e);
176     },
177
178     // private
179     handleMouseDown : function(e){
180         clearTimeout(this.timer);
181         this.el.blur();
182         if(this.pressedCls){
183             this.el.addCls(this.pressedCls);
184         }
185         this.mousedownTime = new Date();
186
187         Ext.getDoc().on(&quot;mouseup&quot;, this.handleMouseUp, this);
188         this.el.on(&quot;mouseout&quot;, this.handleMouseOut, this);
189
190         this.fireEvent(&quot;mousedown&quot;, this, e);
191         this.fireEvent(&quot;click&quot;, this, e);
192
193         // Do not honor delay or interval if acceleration wanted.
194         if (this.accelerate) {
195             this.delay = 400;
196         }
197
198         // Re-wrap the event object in a non-shared object, so it doesn't lose its context if
199         // the global shared EventObject gets a new Event put into it before the timer fires.
200         e = new Ext.EventObjectImpl(e);
201
202         this.timer =  Ext.defer(this.click, this.delay || this.interval, this, [e]);
203     },
204
205     // private
206     click : function(e){
207         this.fireEvent(&quot;click&quot;, this, e);
208         this.timer =  Ext.defer(this.click, this.accelerate ?
209             this.easeOutExpo(Ext.Date.getElapsed(this.mousedownTime),
210                 400,
211                 -390,
212                 12000) :
213             this.interval, this, [e]);
214     },
215
216     easeOutExpo : function (t, b, c, d) {
217         return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
218     },
219
220     // private
221     handleMouseOut : function(){
222         clearTimeout(this.timer);
223         if(this.pressedCls){
224             this.el.removeCls(this.pressedCls);
225         }
226         this.el.on(&quot;mouseover&quot;, this.handleMouseReturn, this);
227     },
228
229     // private
230     handleMouseReturn : function(){
231         this.el.un(&quot;mouseover&quot;, this.handleMouseReturn, this);
232         if(this.pressedCls){
233             this.el.addCls(this.pressedCls);
234         }
235         this.click();
236     },
237
238     // private
239     handleMouseUp : function(e){
240         clearTimeout(this.timer);
241         this.el.un(&quot;mouseover&quot;, this.handleMouseReturn, this);
242         this.el.un(&quot;mouseout&quot;, this.handleMouseOut, this);
243         Ext.getDoc().un(&quot;mouseup&quot;, this.handleMouseUp, this);
244         if(this.pressedCls){
245             this.el.removeCls(this.pressedCls);
246         }
247         this.fireEvent(&quot;mouseup&quot;, this, e);
248     }
249 });
250 </pre>
251 </body>
252 </html>