Upgrade to ExtJS 3.2.2 - Released 06/02/2010
[extjs.git] / docs / source / EventManager-more.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.2.2
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.EventManager"></div>/**
16 * @class Ext.EventManager
17 */
18 Ext.apply(Ext.EventManager, function(){
19    var resizeEvent,
20        resizeTask,
21        textEvent,
22        textSize,
23        D = Ext.lib.Dom,
24        propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
25        curWidth = 0,
26        curHeight = 0,
27        // note 1: IE fires ONLY the keydown event on specialkey autorepeat
28        // note 2: Safari < 3.1, Gecko (Mac/Linux) & Opera fire only the keypress event on specialkey autorepeat
29        // (research done by @Jan Wolter at http://unixpapa.com/js/key.html)
30        useKeydown = Ext.isWebKit ?
31                    Ext.num(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1]) >= 525 :
32                    !((Ext.isGecko && !Ext.isWindows) || Ext.isOpera);
33
34    return {
35        // private
36        doResizeEvent: function(){
37            var h = D.getViewHeight(),
38                w = D.getViewWidth();
39
40             //whacky problem in IE where the resize event will fire even though the w/h are the same.
41             if(curHeight != h || curWidth != w){
42                resizeEvent.fire(curWidth = w, curHeight = h);
43             }
44        },
45
46        <div id="method-Ext.EventManager-onWindowResize"></div>/**
47         * Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),
48         * passes new viewport width and height to handlers.
49         * @param {Function} fn      The handler function the window resize event invokes.
50         * @param {Object}   scope   The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
51         * @param {boolean}  options Options object as passed to {@link Ext.Element#addListener}
52         */
53        onWindowResize : function(fn, scope, options){
54            if(!resizeEvent){
55                resizeEvent = new Ext.util.Event();
56                resizeTask = new Ext.util.DelayedTask(this.doResizeEvent);
57                Ext.EventManager.on(window, "resize", this.fireWindowResize, this);
58            }
59            resizeEvent.addListener(fn, scope, options);
60        },
61
62        // exposed only to allow manual firing
63        fireWindowResize : function(){
64            if(resizeEvent){
65                resizeTask.delay(100);
66            }
67        },
68
69        <div id="method-Ext.EventManager-onTextResize"></div>/**
70         * Adds a listener to be notified when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
71         * @param {Function} fn      The function the event invokes.
72         * @param {Object}   scope   The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
73         * @param {boolean}  options Options object as passed to {@link Ext.Element#addListener}
74         */
75        onTextResize : function(fn, scope, options){
76            if(!textEvent){
77                textEvent = new Ext.util.Event();
78                var textEl = new Ext.Element(document.createElement('div'));
79                textEl.dom.className = 'x-text-resize';
80                textEl.dom.innerHTML = 'X';
81                textEl.appendTo(document.body);
82                textSize = textEl.dom.offsetHeight;
83                setInterval(function(){
84                    if(textEl.dom.offsetHeight != textSize){
85                        textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
86                    }
87                }, this.textResizeInterval);
88            }
89            textEvent.addListener(fn, scope, options);
90        },
91
92        <div id="method-Ext.EventManager-removeResizeListener"></div>/**
93         * Removes the passed window resize listener.
94         * @param {Function} fn        The method the event invokes
95         * @param {Object}   scope    The scope of handler
96         */
97        removeResizeListener : function(fn, scope){
98            if(resizeEvent){
99                resizeEvent.removeListener(fn, scope);
100            }
101        },
102
103        // private
104        fireResize : function(){
105            if(resizeEvent){
106                resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
107            }
108        },
109
110         <div id="prop-Ext.EventManager-textResizeInterval"></div>/**
111         * The frequency, in milliseconds, to check for text resize events (defaults to 50)
112         */
113        textResizeInterval : 50,
114
115        <div id="prop-Ext.EventManager-ieDeferSrc"></div>/**
116         * Url used for onDocumentReady with using SSL (defaults to Ext.SSL_SECURE_URL)
117         */
118        ieDeferSrc : false,
119
120        // protected for use inside the framework
121        // detects whether we should use keydown or keypress based on the browser.
122        useKeydown: useKeydown
123    };
124 }());
125
126 Ext.EventManager.on = Ext.EventManager.addListener;
127
128
129 Ext.apply(Ext.EventObjectImpl.prototype, {
130    <div id="prop-Ext.EventManager-BACKSPACE"></div>/** Key constant @type Number */
131    BACKSPACE: 8,
132    <div id="prop-Ext.EventManager-TAB"></div>/** Key constant @type Number */
133    TAB: 9,
134    <div id="prop-Ext.EventManager-NUM_CENTER"></div>/** Key constant @type Number */
135    NUM_CENTER: 12,
136    <div id="prop-Ext.EventManager-ENTER"></div>/** Key constant @type Number */
137    ENTER: 13,
138    <div id="prop-Ext.EventManager-RETURN"></div>/** Key constant @type Number */
139    RETURN: 13,
140    <div id="prop-Ext.EventManager-SHIFT"></div>/** Key constant @type Number */
141    SHIFT: 16,
142    <div id="prop-Ext.EventManager-CTRL"></div>/** Key constant @type Number */
143    CTRL: 17,
144    CONTROL : 17, // legacy
145    <div id="prop-Ext.EventManager-ALT"></div>/** Key constant @type Number */
146    ALT: 18,
147    <div id="prop-Ext.EventManager-PAUSE"></div>/** Key constant @type Number */
148    PAUSE: 19,
149    <div id="prop-Ext.EventManager-CAPS_LOCK"></div>/** Key constant @type Number */
150    CAPS_LOCK: 20,
151    <div id="prop-Ext.EventManager-ESC"></div>/** Key constant @type Number */
152    ESC: 27,
153    <div id="prop-Ext.EventManager-SPACE"></div>/** Key constant @type Number */
154    SPACE: 32,
155    <div id="prop-Ext.EventManager-PAGE_UP"></div>/** Key constant @type Number */
156    PAGE_UP: 33,
157    PAGEUP : 33, // legacy
158    <div id="prop-Ext.EventManager-PAGE_DOWN"></div>/** Key constant @type Number */
159    PAGE_DOWN: 34,
160    PAGEDOWN : 34, // legacy
161    <div id="prop-Ext.EventManager-END"></div>/** Key constant @type Number */
162    END: 35,
163    <div id="prop-Ext.EventManager-HOME"></div>/** Key constant @type Number */
164    HOME: 36,
165    <div id="prop-Ext.EventManager-LEFT"></div>/** Key constant @type Number */
166    LEFT: 37,
167    <div id="prop-Ext.EventManager-UP"></div>/** Key constant @type Number */
168    UP: 38,
169    <div id="prop-Ext.EventManager-RIGHT"></div>/** Key constant @type Number */
170    RIGHT: 39,
171    <div id="prop-Ext.EventManager-DOWN"></div>/** Key constant @type Number */
172    DOWN: 40,
173    <div id="prop-Ext.EventManager-PRINT_SCREEN"></div>/** Key constant @type Number */
174    PRINT_SCREEN: 44,
175    <div id="prop-Ext.EventManager-INSERT"></div>/** Key constant @type Number */
176    INSERT: 45,
177    <div id="prop-Ext.EventManager-DELETE"></div>/** Key constant @type Number */
178    DELETE: 46,
179    <div id="prop-Ext.EventManager-ZERO"></div>/** Key constant @type Number */
180    ZERO: 48,
181    <div id="prop-Ext.EventManager-ONE"></div>/** Key constant @type Number */
182    ONE: 49,
183    <div id="prop-Ext.EventManager-TWO"></div>/** Key constant @type Number */
184    TWO: 50,
185    <div id="prop-Ext.EventManager-THREE"></div>/** Key constant @type Number */
186    THREE: 51,
187    <div id="prop-Ext.EventManager-FOUR"></div>/** Key constant @type Number */
188    FOUR: 52,
189    <div id="prop-Ext.EventManager-FIVE"></div>/** Key constant @type Number */
190    FIVE: 53,
191    <div id="prop-Ext.EventManager-SIX"></div>/** Key constant @type Number */
192    SIX: 54,
193    <div id="prop-Ext.EventManager-SEVEN"></div>/** Key constant @type Number */
194    SEVEN: 55,
195    <div id="prop-Ext.EventManager-EIGHT"></div>/** Key constant @type Number */
196    EIGHT: 56,
197    <div id="prop-Ext.EventManager-NINE"></div>/** Key constant @type Number */
198    NINE: 57,
199    <div id="prop-Ext.EventManager-A"></div>/** Key constant @type Number */
200    A: 65,
201    <div id="prop-Ext.EventManager-B"></div>/** Key constant @type Number */
202    B: 66,
203    <div id="prop-Ext.EventManager-C"></div>/** Key constant @type Number */
204    C: 67,
205    <div id="prop-Ext.EventManager-D"></div>/** Key constant @type Number */
206    D: 68,
207    <div id="prop-Ext.EventManager-E"></div>/** Key constant @type Number */
208    E: 69,
209    <div id="prop-Ext.EventManager-F"></div>/** Key constant @type Number */
210    F: 70,
211    <div id="prop-Ext.EventManager-G"></div>/** Key constant @type Number */
212    G: 71,
213    <div id="prop-Ext.EventManager-H"></div>/** Key constant @type Number */
214    H: 72,
215    <div id="prop-Ext.EventManager-I"></div>/** Key constant @type Number */
216    I: 73,
217    <div id="prop-Ext.EventManager-J"></div>/** Key constant @type Number */
218    J: 74,
219    <div id="prop-Ext.EventManager-K"></div>/** Key constant @type Number */
220    K: 75,
221    <div id="prop-Ext.EventManager-L"></div>/** Key constant @type Number */
222    L: 76,
223    <div id="prop-Ext.EventManager-M"></div>/** Key constant @type Number */
224    M: 77,
225    <div id="prop-Ext.EventManager-N"></div>/** Key constant @type Number */
226    N: 78,
227    <div id="prop-Ext.EventManager-O"></div>/** Key constant @type Number */
228    O: 79,
229    <div id="prop-Ext.EventManager-P"></div>/** Key constant @type Number */
230    P: 80,
231    <div id="prop-Ext.EventManager-Q"></div>/** Key constant @type Number */
232    Q: 81,
233    <div id="prop-Ext.EventManager-R"></div>/** Key constant @type Number */
234    R: 82,
235    <div id="prop-Ext.EventManager-S"></div>/** Key constant @type Number */
236    S: 83,
237    <div id="prop-Ext.EventManager-T"></div>/** Key constant @type Number */
238    T: 84,
239    <div id="prop-Ext.EventManager-U"></div>/** Key constant @type Number */
240    U: 85,
241    <div id="prop-Ext.EventManager-V"></div>/** Key constant @type Number */
242    V: 86,
243    <div id="prop-Ext.EventManager-W"></div>/** Key constant @type Number */
244    W: 87,
245    <div id="prop-Ext.EventManager-X"></div>/** Key constant @type Number */
246    X: 88,
247    <div id="prop-Ext.EventManager-Y"></div>/** Key constant @type Number */
248    Y: 89,
249    <div id="prop-Ext.EventManager-Z"></div>/** Key constant @type Number */
250    Z: 90,
251    <div id="prop-Ext.EventManager-CONTEXT_MENU"></div>/** Key constant @type Number */
252    CONTEXT_MENU: 93,
253    <div id="prop-Ext.EventManager-NUM_ZERO"></div>/** Key constant @type Number */
254    NUM_ZERO: 96,
255    <div id="prop-Ext.EventManager-NUM_ONE"></div>/** Key constant @type Number */
256    NUM_ONE: 97,
257    <div id="prop-Ext.EventManager-NUM_TWO"></div>/** Key constant @type Number */
258    NUM_TWO: 98,
259    <div id="prop-Ext.EventManager-NUM_THREE"></div>/** Key constant @type Number */
260    NUM_THREE: 99,
261    <div id="prop-Ext.EventManager-NUM_FOUR"></div>/** Key constant @type Number */
262    NUM_FOUR: 100,
263    <div id="prop-Ext.EventManager-NUM_FIVE"></div>/** Key constant @type Number */
264    NUM_FIVE: 101,
265    <div id="prop-Ext.EventManager-NUM_SIX"></div>/** Key constant @type Number */
266    NUM_SIX: 102,
267    <div id="prop-Ext.EventManager-NUM_SEVEN"></div>/** Key constant @type Number */
268    NUM_SEVEN: 103,
269    <div id="prop-Ext.EventManager-NUM_EIGHT"></div>/** Key constant @type Number */
270    NUM_EIGHT: 104,
271    <div id="prop-Ext.EventManager-NUM_NINE"></div>/** Key constant @type Number */
272    NUM_NINE: 105,
273    <div id="prop-Ext.EventManager-NUM_MULTIPLY"></div>/** Key constant @type Number */
274    NUM_MULTIPLY: 106,
275    <div id="prop-Ext.EventManager-NUM_PLUS"></div>/** Key constant @type Number */
276    NUM_PLUS: 107,
277    <div id="prop-Ext.EventManager-NUM_MINUS"></div>/** Key constant @type Number */
278    NUM_MINUS: 109,
279    <div id="prop-Ext.EventManager-NUM_PERIOD"></div>/** Key constant @type Number */
280    NUM_PERIOD: 110,
281    <div id="prop-Ext.EventManager-NUM_DIVISION"></div>/** Key constant @type Number */
282    NUM_DIVISION: 111,
283    <div id="prop-Ext.EventManager-F1"></div>/** Key constant @type Number */
284    F1: 112,
285    <div id="prop-Ext.EventManager-F2"></div>/** Key constant @type Number */
286    F2: 113,
287    <div id="prop-Ext.EventManager-F3"></div>/** Key constant @type Number */
288    F3: 114,
289    <div id="prop-Ext.EventManager-F4"></div>/** Key constant @type Number */
290    F4: 115,
291    <div id="prop-Ext.EventManager-F5"></div>/** Key constant @type Number */
292    F5: 116,
293    <div id="prop-Ext.EventManager-F6"></div>/** Key constant @type Number */
294    F6: 117,
295    <div id="prop-Ext.EventManager-F7"></div>/** Key constant @type Number */
296    F7: 118,
297    <div id="prop-Ext.EventManager-F8"></div>/** Key constant @type Number */
298    F8: 119,
299    <div id="prop-Ext.EventManager-F9"></div>/** Key constant @type Number */
300    F9: 120,
301    <div id="prop-Ext.EventManager-F10"></div>/** Key constant @type Number */
302    F10: 121,
303    <div id="prop-Ext.EventManager-F11"></div>/** Key constant @type Number */
304    F11: 122,
305    <div id="prop-Ext.EventManager-F12"></div>/** Key constant @type Number */
306    F12: 123,
307
308    /** @private */
309    isNavKeyPress : function(){
310        var me = this,
311            k = this.normalizeKey(me.keyCode);
312        return (k >= 33 && k <= 40) ||  // Page Up/Down, End, Home, Left, Up, Right, Down
313        k == me.RETURN ||
314        k == me.TAB ||
315        k == me.ESC;
316    },
317
318    isSpecialKey : function(){
319        var k = this.normalizeKey(this.keyCode);
320        return (this.type == 'keypress' && this.ctrlKey) ||
321        this.isNavKeyPress() ||
322        (k == this.BACKSPACE) || // Backspace
323        (k >= 16 && k <= 20) || // Shift, Ctrl, Alt, Pause, Caps Lock
324        (k >= 44 && k <= 46);   // Print Screen, Insert, Delete
325    },
326
327    getPoint : function(){
328        return new Ext.lib.Point(this.xy[0], this.xy[1]);
329    },
330
331    <div id="method-Ext.EventManager-hasModifier"></div>/**
332     * Returns true if the control, meta, shift or alt key was pressed during this event.
333     * @return {Boolean}
334     */
335    hasModifier : function(){
336        return ((this.ctrlKey || this.altKey) || this.shiftKey);
337    }
338 });</pre>    
339 </body>
340 </html>