[extjs.git] / extjs / packages / core / src / event / Event.js

/**\r
 * Just as {@link Ext.dom.Element} wraps around a native DOM node, {@link Ext.event.Event} wraps the browser's native\r
 * event-object normalizing cross-browser differences such as mechanisms to stop event-propagation along with a method\r
 * to prevent default actions from taking place.\r
 *\r
 * Here is a simple example of how you use it:\r
 *\r
 *     @example preview\r
 *     var container = Ext.create('Ext.Container', {\r
 *         layout: 'fit',\r
 *         renderTo: Ext.getBody(),\r
 *         items: [{\r
 *             id: 'logger',\r
 *             styleHtmlContent: true,\r
 *             html: 'Click somewhere!',\r
 *             padding: 5\r
 *         }]\r
 *     });\r
 *\r
 *     container.getEl().on({\r
 *         click: function(e, node) {\r
 *             var string = '';\r
 *\r
 *             string += 'You clicked at: <strong>{ x: ' + e.pageX + ', y: ' + e.pageY + ' }</strong> <i>(e.pageX & e.pageY)</i>';\r
 *             string += '<hr />';\r
 *             string += 'The HTMLElement you clicked has the className of: <strong>' + e.target.className + '</strong> <i>(e.target)</i>';\r
 *             string += '<hr />';\r
 *             string += 'The HTMLElement which has the listener has a className of: <strong>' + e.currentTarget.className + '</strong> <i>(e.currentTarget)</i>';\r
 *\r
 *             Ext.getCmp('logger').setHtml(string);\r
 *         }\r
 *     });\r
 *\r
 * ## Recognizers\r
 *\r
 * Ext JS includes many default event recognizers to know when a user interacts with the application.\r
 *\r
 * For a full list of default recognizers, and more information, please view the {@link Ext.event.gesture.Recognizer} documentation.\r
 * \r
 * This class also provides a set of constants for use with key events.  These are useful\r
 * for determining if a specific key was pressed, and are available both on instances,\r
 * and as static properties of the class.  The following two statements are equivalent:\r
 * \r
 *     if (e.getKey() === Ext.event.Event.TAB) {\r
 *         // tab key was pressed\r
 *     }\r
 * \r
 *     if (e.getKey() === e.TAB) {\r
 *         // tab key was pressed\r
 *     }\r
 */\r
Ext.define('Ext.event.Event', {\r
    alternateClassName: 'Ext.EventObjectImpl',\r
\r
    requires: [\r
        'Ext.util.Point'\r
    ],\r
\r
    /**\r
     * @property {Number} distance\r
     * The distance of the event.\r
     *\r
     * **This is only available when the event type is `swipe` and `pinch`.**\r
     */\r
\r
    /**\r
     * @property {HTMLElement} target\r
     * The element that fired this event.  For the element whose handlers are currently\r
     * being processed, i.e. the element that the event handler was attached to, use\r
     * `currentTarget`\r
     */\r
\r
    /**\r
     * @property {HTMLElement} currentTarget\r
     * Refers to the element the event handler was attached to, vs the `target`, which is\r
     * the actual element that fired the event.  For example, if the event bubbles, the\r
     * `target` element may be a descendant of the `currentTarget`, as the event may\r
     * have been triggered on the `target` and then bubbled up to the `currentTarget`\r
     * where it was handled.\r
     */\r
\r
    /**\r
     * @property {HTMLElement} delegatedTarget\r
     * Same as `currentTarget`\r
     * @deprecated 5.0.0 use {@link #currentTarget} instead.\r
     */\r
    \r
    /**\r
     * @property {Number} button\r
     * Indicates which mouse button caused the event for mouse events, for example\r
     * `mousedown`, `click`, `mouseup`:\r
     * - `0` for left button.\r
     * - `1` for middle button.\r
     * - `2` for right button.\r
     *\r
     * *Note*: In IE8 & IE9, the `click` event does not provide the button.\r
     */\r
\r
    /**\r
     * @property {Number} pageX The browsers x coordinate of the event.\r
     * Note: this only works in browsers that support pageX on the native browser event\r
     * object (pageX is not natively supported in IE9 and earlier).  In Ext JS, for a\r
     * cross browser normalized x-coordinate use {@link #getX}\r
     */\r
\r
    /**\r
     * @property {Number} pageY The browsers y coordinate of the event.\r
     * Note: this only works in browsers that support pageY on the native browser event\r
     * object (pageY is not natively supported in IE9 and earlier).  In Ext JS, for a\r
     * cross browser normalized y-coordinate use {@link #getY}\r
     */\r
\r
    /**\r
     * @property {Boolean} ctrlKey\r
     * True if the control key was down during the event.\r
     * In Mac this will also be true when meta key was down.\r
     */\r
    /**\r
     * @property {Boolean} altKey\r
     * True if the alt key was down during the event.\r
     */\r
    /**\r
     * @property {Boolean} shiftKey\r
     * True if the shift key was down during the event.\r
     */\r
\r
    /**\r
     * @property {Event} browserEvent\r
     * The raw browser event which this object wraps.\r
     */\r
\r
    isStopped: false,\r
\r
    /**\r
     * @property {Boolean}\r
     * Indicates whether or not {@link #preventDefault preventDefault()} was called on the event.\r
     */\r
    defaultPrevented: false,\r
\r
    isEvent: true,\r
\r
    statics: {\r
        resolveTextNode: function(node) {\r
            return (node && node.nodeType === 3) ? node.parentNode : node;\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        pointerEvents: {\r
            pointerdown: 1,\r
            pointermove: 1,\r
            pointerup: 1,\r
            pointercancel: 1,\r
            pointerover: 1,\r
            pointerout: 1,\r
            pointerenter: 1,\r
            pointerleave: 1,\r
            MSPointerDown: 1,\r
            MSPointerMove: 1,\r
            MSPointerUp: 1,\r
            MSPointerOver: 1,\r
            MSPointerOut: 1,\r
            MSPointerCancel: 1,\r
            MSPointerEnter: 1,\r
            MSPointerLeave: 1\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        mouseEvents: {\r
            mousedown: 1,\r
            mousemove: 1,\r
            mouseup: 1,\r
            mouseover: 1,\r
            mouseout: 1,\r
            mouseenter: 1,\r
            mouseleave: 1\r
        },\r
\r
        /**\r
         * @private\r
         * These are tracked separately from mouseEvents because the mouseEvents map\r
         * is used by Dom publisher to eliminate duplicate events on devices that fire\r
         * multiple kinds of events (mouse, touch, pointer).  Adding click events to the\r
         * mouse events map can cause click events to be blocked from firing in some cases.\r
         */\r
        clickEvents: {\r
            click: 1,\r
            dblclick: 1\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        touchEvents: {\r
            touchstart: 1,\r
            touchmove: 1,\r
            touchend: 1,\r
            touchcancel: 1\r
        },\r
\r
        /**\r
         * @private\r
         */\r
        focusEvents: {\r
            focus: 1,\r
            blur: 1,\r
            focusin: 1,\r
            focusout: 1,\r
            focusenter: 1,\r
            focusleave: 1\r
        },\r
\r
        // msPointerTypes in IE10 are numbers, in the w3c spec they are strings.\r
        // this map allows us to normalize the pointerType for an event\r
        // http://www.w3.org/TR/pointerevents/#widl-PointerEvent-pointerType\r
        // http://msdn.microsoft.com/en-us/library/ie/hh772359(v=vs.85).aspx\r
        pointerTypes: {\r
            2: 'touch',\r
            3: 'pen',\r
            4: 'mouse',\r
            touch: 'touch',\r
            pen: 'pen',\r
            mouse: 'mouse'\r
        }\r
    },\r
\r
    constructor: function(event) {\r
        var me = this,\r
            self = me.self,\r
            resolveTextNode = me.self.resolveTextNode,\r
            changedTouches = event.changedTouches,\r
            // The target object from which to obtain the coordinates (pageX, pageY). For\r
            // mouse and pointer events this is simply the event object itself, but touch\r
            // events have their coordinates on the "Touch" object(s) instead.\r
            coordinateOwner = changedTouches ? changedTouches[0] : event,\r
            type = event.type,\r
            pointerType, relatedTarget;\r
\r
        me.pageX = coordinateOwner.pageX;\r
        me.pageY = coordinateOwner.pageY;\r
\r
        me.target = me.delegatedTarget = resolveTextNode(event.target);\r
        relatedTarget = event.relatedTarget;\r
        if (relatedTarget) {\r
            me.relatedTarget = resolveTextNode(relatedTarget);\r
        }\r
\r
        me.browserEvent = me.event = event;\r
        me.type = type;\r
        // set button to 0 if undefined so that touchstart, touchend, and tap will quack\r
        // like left mouse button mousedown mouseup, and click\r
        me.button = event.button || 0;\r
        me.shiftKey = event.shiftKey;\r
        // mac metaKey behaves like ctrlKey\r
        me.ctrlKey = event.ctrlKey || event.metaKey || false;\r
        me.altKey = event.altKey;\r
        me.charCode = event.charCode;\r
        me.keyCode = event.keyCode;\r
\r
        me.buttons = event.buttons;\r
        // When invoking synthetic events, current APIs do not\r
        // have the ability to specify the buttons config, which\r
        // defaults to button. For buttons, 0 means no button\r
        // is pressed, whereas for button, 0 means left click.\r
        // Normalize that here\r
        if (me.button === 0 && me.buttons === 0) {\r
            me.buttons = 1;\r
        }\r
        \r
        if (self.forwardTab !== undefined && self.focusEvents[type]) {\r
            me.forwardTab = self.forwardTab;\r
        }\r
\r
        if (self.mouseEvents[type] || self.clickEvents[type]) {\r
            pointerType = 'mouse';\r
        } else if (self.pointerEvents[type]) {\r
            pointerType = self.pointerTypes[event.pointerType];\r
        } else if (self.touchEvents[type]) {\r
            pointerType = 'touch';\r
        }\r
\r
        if (pointerType) {\r
            me.pointerType = pointerType;\r
        }\r
\r
        me.timeStamp = me.time = +(event.timeStamp || new Date());\r
    },\r
\r
    /**\r
     * Creates a new Event object that is prototype-chained to this event.  Useful for\r
     * creating identical events so that certain properties can be changed without\r
     * affecting the original event.  For example, translated events have their "type"\r
     * corrected in this manner.\r
     * @param {Object} props properties to set on the chained event\r
     * @private\r
     */\r
    chain: function(props) {\r
        var e = Ext.Object.chain(this);\r
        e.parentEvent = this; // needed for stopPropagation\r
        return Ext.apply(e, props);\r
    },\r
\r
    /**\r
     * Correctly scales a given wheel delta.\r
     * @param {Number} delta The delta value.\r
     * @private\r
     */\r
    correctWheelDelta: function (delta) {\r
        var scale = this.WHEEL_SCALE,\r
            ret = Math.round(delta / scale);\r
\r
        if (!ret && delta) {\r
            ret = (delta < 0) ? -1 : 1; // don't allow non-zero deltas to go to zero!\r
        }\r
\r
        return ret;\r
    },\r
\r
    /**\r
     * Gets the character code for the event.\r
     * @return {Number}\r
     */\r
    getCharCode: function(){\r
        return this.charCode || this.keyCode;\r
    },\r
\r
    /**\r
     * Returns a normalized keyCode for the event.\r
     * @return {Number} The key code\r
     */\r
    getKey: function(){\r
        return this.keyCode || this.charCode;\r
    },\r
    \r
    /**\r
     * Returns the name of the keyCode for the event.\r
     * @return {String} The key name\r
     */\r
    getKeyName: function() {\r
        return this.keyCodes[this.keyCode];\r
    },\r
    \r
    /**\r
     * Returns a point object that consists of the object coordinates.\r
     * @return {Ext.util.Point} point\r
     */\r
    getPoint: function(){\r
        var xy = this.getXY();\r
        return new Ext.util.Point(xy[0], xy[1]);\r
    },\r
\r
    /**\r
     * Gets the related target.\r
     * @param {String} [selector] A simple selector to filter the target or look for an\r
     * ancestor of the target. See {@link Ext.dom.Query} for information about simple\r
     * selectors.\r
     * @param {Number/HTMLElement} [maxDepth] The max depth to search as a number or\r
     * element (defaults to 10 || document.body).\r
     * @param {Boolean} [returnEl] `true` to return a Ext.Element object instead of DOM\r
     * node.\r
     * @return {HTMLElement}\r
     */\r
    getRelatedTarget: function(selector, maxDepth, returnEl){\r
        var relatedTarget = this.relatedTarget,\r
            target = null;\r
\r
        if (relatedTarget) {\r
            if (selector) {\r
                target = Ext.fly(relatedTarget).findParent(selector, maxDepth, returnEl);\r
            } else {\r
                target = returnEl ? Ext.get(relatedTarget) : relatedTarget;\r
            }\r
        }\r
        return target;\r
    },\r
\r
    /**\r
     * Gets the target for the event.\r
     * @param {String} selector (optional) A simple selector to filter the target or look\r
     * for an ancestor of the target\r
     * @param {Number/Mixed} [maxDepth=10||document.body] (optional) The max depth to\r
     * search as a number or element (defaults to 10 || document.body)\r
     * @param {Boolean} returnEl (optional) `true` to return a Ext.Element object instead\r
     * of DOM node.\r
     * @return {HTMLElement}\r
     */\r
    getTarget: function(selector, maxDepth, returnEl) {\r
        return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) :\r
            (returnEl ? Ext.get(this.target) : this.target);\r
    },\r
\r
    /**\r
     * Returns the time of the event.\r
     * @return {Date}\r
     */\r
    getTime: function() {\r
        return this.time;\r
    },\r
\r
    /**\r
     * Normalizes mouse wheel y-delta across browsers. To get x-delta information, use\r
     * {@link #getWheelDeltas} instead.\r
     * @return {Number} The mouse wheel y-delta\r
     */\r
    getWheelDelta: function(){\r
        var deltas = this.getWheelDeltas();\r
\r
        return deltas.y;\r
    },\r
\r
    /**\r
     * Returns the mouse wheel deltas for this event.\r
     * @return {Object} An object with "x" and "y" properties holding the mouse wheel deltas.\r
     */\r
    getWheelDeltas: function () {\r
        var me = this,\r
            event = me.browserEvent,\r
            dx = 0, dy = 0; // the deltas\r
\r
        if (Ext.isDefined(event.wheelDeltaX)) { // WebKit has both dimensions\r
            dx = event.wheelDeltaX;\r
            dy = event.wheelDeltaY;\r
        } else if (event.wheelDelta) { // old WebKit and IE\r
            dy = event.wheelDelta;\r
        } else if (event.detail) { // Gecko\r
            dy = -event.detail; // gecko is backwards\r
\r
            // Gecko sometimes returns really big values if the user changes settings to\r
            // scroll a whole page per scroll\r
            if (dy > 100) {\r
                dy = 3;\r
            } else if (dy < -100) {\r
                dy = -3;\r
            }\r
\r
            // Firefox 3.1 adds an axis field to the event to indicate direction of\r
            // scroll.  See https://developer.mozilla.org/en/Gecko-Specific_DOM_Events\r
            if (Ext.isDefined(event.axis) && event.axis === event.HORIZONTAL_AXIS) {\r
                dx = dy;\r
                dy = 0;\r
            }\r
        }\r
\r
        return {\r
            x: me.correctWheelDelta(dx),\r
            y: me.correctWheelDelta(dy)\r
        };\r
    },\r
\r
    /**\r
     * Gets the x coordinate of the event.\r
     * @return {Number}\r
     */\r
    getX: function() {\r
        return this.getXY()[0];\r
    },\r
\r
    /**\r
     * Gets the X and Y coordinates of the event.\r
     * @return {Number[]} The xy values like [x, y]\r
     */\r
    getXY: function() {\r
        var me = this,\r
            xy = me.xy;\r
\r
        if (!xy) {\r
            xy = me.xy = [me.pageX, me.pageY];\r
            //<feature legacyBrowser>\r
            var x = xy[0],\r
                browserEvent, doc, docEl, body;\r
\r
            // pageX/pageY not available (undefined, not null), use clientX/clientY instead\r
            if (!x && x !== 0) {\r
                browserEvent = me.browserEvent;\r
                doc = document;\r
                docEl = doc.documentElement;\r
                body = doc.body;\r
                xy[0] = browserEvent.clientX +\r
                    (docEl && docEl.scrollLeft || body && body.scrollLeft || 0) -\r
                    (docEl && docEl.clientLeft || body && body.clientLeft || 0);\r
                xy[1] = browserEvent.clientY +\r
                    (docEl && docEl.scrollTop  || body && body.scrollTop  || 0) -\r
                    (docEl && docEl.clientTop  || body && body.clientTop  || 0);\r
            }\r
            //</feature>\r
        }\r
\r
        return xy;\r
    },\r
\r
    /**\r
     * Gets the y coordinate of the event.\r
     * @return {Number}\r
     */\r
    getY: function() {\r
        return this.getXY()[1];\r
    },\r
\r
   /**\r
    * Returns true if the control, meta, shift or alt key was pressed during this event.\r
    * @return {Boolean}\r
    */\r
    hasModifier: function() {\r
        var me = this;\r
        return !!(me.ctrlKey || me.altKey || me.shiftKey || me.metaKey);\r
    },\r
\r
    /**\r
     * Checks if the key pressed was a "navigation" key. A navigation key is defined by\r
     * these keys:\r
     *\r
     *  - Page Up\r
     *  - Page Down\r
     *  - End\r
     *  - Home\r
     *  - Left\r
     *  - Up\r
     *  - Right\r
     *  - Down\r
     *  - Return\r
     *  - Tab\r
     *  - Esc\r
     *\r
     * @param {Boolean} [scrollableOnly] Only check navigation keys that can cause\r
     * element scrolling by their default action.\r
     *\r
     * @return {Boolean} `true` if the press is a navigation keypress\r
     */\r
    isNavKeyPress: function(scrollableOnly) {\r
        var me = this,\r
            k = me.keyCode,\r
            isKeyPress = me.type === 'keypress';\r
\r
        // See specs for description of behaviour\r
        return ((!isKeyPress || Ext.isGecko) && k >= 33 && k <= 40) ||  // Page Up/Down, End, Home, Left, Up, Right, Down\r
               (!scrollableOnly &&\r
               (k === me.RETURN ||\r
                k === me.TAB ||\r
                k === me.ESC));\r
    },\r
\r
    /**\r
     * Checks if the key pressed was a "special" key. A special key is defined as one of\r
     * these keys:\r
     *\r
     *  - Page Up\r
     *  - Page Down\r
     *  - End\r
     *  - Home\r
     *  - Left arrow\r
     *  - Up arrow\r
     *  - Right arrow\r
     *  - Down arrow\r
     *  - Return\r
     *  - Tab\r
     *  - Esc\r
     *  - Backspace\r
     *  - Delete\r
     *  - Shift\r
     *  - Ctrl\r
     *  - Alt\r
     *  - Pause\r
     *  - Caps Lock\r
     *  - Print Screen\r
     *  - Insert\r
     *\r
     * @return {Boolean} `true` if the key for this event is special\r
     */\r
    isSpecialKey: function() {\r
        var me = this,\r
            k = me.keyCode,\r
            isGecko = Ext.isGecko,\r
            isKeyPress = me.type === 'keypress';\r
        \r
        // See specs for description of behaviour\r
        return (isGecko && isKeyPress && me.charCode === 0) ||\r
               (this.isNavKeyPress()) ||\r
               (k === me.BACKSPACE) ||\r
               (k === me.ENTER) ||\r
               (k >= 16 && k <= 20) ||              // Shift, Ctrl, Alt, Pause, Caps Lock\r
               ((!isKeyPress || isGecko) && k >= 44 && k <= 46); // Print Screen, Insert, Delete\r
    },\r
\r
    makeUnpreventable: function() {\r
        this.browserEvent.preventDefault = Ext.emptyFn;\r
    },\r
\r
    /**\r
     * Prevents the browsers default handling of the event.\r
     * @chainable\r
     */\r
    preventDefault: function() {\r
        var me = this,\r
            parentEvent = me.parentEvent;\r
\r
        me.defaultPrevented = true;\r
\r
        // if the event was created by prototype-chaining a new object to an existing event\r
        // instance, we need to make sure the parent event is defaultPrevented as well.\r
        if (parentEvent) {\r
            parentEvent.defaultPrevented = true;\r
        }\r
\r
        me.browserEvent.preventDefault();\r
\r
        return me;\r
    },\r
\r
    setCurrentTarget: function(target) {\r
        this.currentTarget = this.delegatedTarget = target;\r
    },\r
\r
    /**\r
     * Stop the event (`{@link #preventDefault}` and `{@link #stopPropagation}`).\r
     * @chainable\r
     */\r
    stopEvent: function() {\r
        return this.preventDefault().stopPropagation();\r
    },\r
\r
    /**\r
     * Cancels bubbling of the event.\r
     * @chainable\r
     */\r
    stopPropagation: function() {\r
        var me = this,\r
            browserEvent = me.browserEvent,\r
            parentEvent = me.parentEvent;\r
\r
        // Set isStopped for delegated event listeners.  Dom publisher will check this\r
        // property during its emulated propagation phase (see doPublish)\r
        me.isStopped = true;\r
\r
        // if the event was created by prototype-chaining a new object to an existing event\r
        // instance, we need to make sure the parent event is stopped.  This feature most\r
        // likely comes into play when dealing with event translation.  For example on touch\r
        // browsers addListener('mousedown') actually attaches a 'touchstart' listener behind\r
        // the scenes.  When the 'touchstart' event is dispatched, the event system will\r
        // create a "chained" copy of the event object before correcting its type back to\r
        // 'mousedown' and calling the handler.  When propagating the event we look at the\r
        // original event, not the chained one to determine if propagation should continue,\r
        // so the isStopped property must be set on the parentEvent or stopPropagation\r
        // will not work.\r
        if (parentEvent) {\r
            parentEvent.isStopped = true;\r
        }\r
\r
        //<feature legacyBrowser>\r
        if (!browserEvent.stopPropagation) {\r
            // IE < 10 does not have stopPropagation()\r
            browserEvent.cancelBubble = true;\r
            return me;\r
        }\r
        //</feature>\r
\r
        // For non-delegated event listeners (those that are directly attached to the\r
        // DOM element) we need to call the browserEvent's stopPropagation() method.\r
        browserEvent.stopPropagation();\r
\r
        return me;\r
    },\r
\r
    /**\r
     * Returns true if the target of this event is a child of `el`.  Unless the allowEl\r
     * parameter is set, it will return false if if the target is `el`.\r
     * Example usage:\r
     * \r
     *     // Handle click on any child of an element\r
     *     Ext.getBody().on('click', function(e){\r
     *         if(e.within('some-el')){\r
     *             alert('Clicked on a child of some-el!');\r
     *         }\r
     *     });\r
     * \r
     *     // Handle click directly on an element, ignoring clicks on child nodes\r
     *     Ext.getBody().on('click', function(e,t){\r
     *         if((t.id == 'some-el') && !e.within(t, true)){\r
     *             alert('Clicked directly on some-el!');\r
     *         }\r
     *     });\r
     * \r
     * @param {String/HTMLElement/Ext.dom.Element} el The id, DOM element or Ext.Element to check\r
     * @param {Boolean} [related] `true` to test if the related target is within el instead\r
     * of the target\r
     * @param {Boolean} [allowEl] `true` to also check if the passed element is the target\r
     * or related target\r
     * @return {Boolean}\r
     */\r
    within: function(el, related, allowEl){\r
        var t;\r
        if (el) {\r
            t = related ? this.getRelatedTarget() : this.getTarget();\r
        }\r
\r
        return t ? Ext.fly(el).contains(t) || !!(allowEl && t === Ext.getDom(el)) : false;\r
    },\r
\r
    deprecated: {\r
        '4.0': {\r
            methods: {\r
\r
                /**\r
                 * Gets the x coordinate of the event.\r
                 * @return {Number}\r
                 * @deprecated 4.0 use {@link #getX} instead\r
                 */\r
                getPageX: 'getX',\r
                \r
                /**\r
                 * Gets the y coordinate of the event.\r
                 * @return {Number}\r
                 * @deprecated 4.0 use {@link #getY} instead\r
                 */\r
                getPageY: 'getY'\r
            }\r
        }\r
    }\r
}, function(Event) {\r
    var prototype = Event.prototype,\r
        constants = {\r
        /** Key constant @type Number */\r
        BACKSPACE: 8,\r
        /** Key constant @type Number */\r
        TAB: 9,\r
        /** Key constant @type Number */\r
        NUM_CENTER: 12,\r
        /** Key constant @type Number */\r
        ENTER: 13,\r
        /** Key constant @type Number */\r
        RETURN: 13,\r
        /** Key constant @type Number */\r
        SHIFT: 16,\r
        /** Key constant @type Number */\r
        CTRL: 17,\r
        /** Key constant @type Number */\r
        ALT: 18,\r
        /** Key constant @type Number */\r
        PAUSE: 19,\r
        /** Key constant @type Number */\r
        CAPS_LOCK: 20,\r
        /** Key constant @type Number */\r
        ESC: 27,\r
        /** Key constant @type Number */\r
        SPACE: 32,\r
        /** Key constant @type Number */\r
        PAGE_UP: 33,\r
        /** Key constant @type Number */\r
        PAGE_DOWN: 34,\r
        /** Key constant @type Number */\r
        END: 35,\r
        /** Key constant @type Number */\r
        HOME: 36,\r
        /** Key constant @type Number */\r
        LEFT: 37,\r
        /** Key constant @type Number */\r
        UP: 38,\r
        /** Key constant @type Number */\r
        RIGHT: 39,\r
        /** Key constant @type Number */\r
        DOWN: 40,\r
        /** Key constant @type Number */\r
        PRINT_SCREEN: 44,\r
        /** Key constant @type Number */\r
        INSERT: 45,\r
        /** Key constant @type Number */\r
        DELETE: 46,\r
        /** Key constant @type Number */\r
        ZERO: 48,\r
        /** Key constant @type Number */\r
        ONE: 49,\r
        /** Key constant @type Number */\r
        TWO: 50,\r
        /** Key constant @type Number */\r
        THREE: 51,\r
        /** Key constant @type Number */\r
        FOUR: 52,\r
        /** Key constant @type Number */\r
        FIVE: 53,\r
        /** Key constant @type Number */\r
        SIX: 54,\r
        /** Key constant @type Number */\r
        SEVEN: 55,\r
        /** Key constant @type Number */\r
        EIGHT: 56,\r
        /** Key constant @type Number */\r
        NINE: 57,\r
        /** Key constant @type Number */\r
        A: 65,\r
        /** Key constant @type Number */\r
        B: 66,\r
        /** Key constant @type Number */\r
        C: 67,\r
        /** Key constant @type Number */\r
        D: 68,\r
        /** Key constant @type Number */\r
        E: 69,\r
        /** Key constant @type Number */\r
        F: 70,\r
        /** Key constant @type Number */\r
        G: 71,\r
        /** Key constant @type Number */\r
        H: 72,\r
        /** Key constant @type Number */\r
        I: 73,\r
        /** Key constant @type Number */\r
        J: 74,\r
        /** Key constant @type Number */\r
        K: 75,\r
        /** Key constant @type Number */\r
        L: 76,\r
        /** Key constant @type Number */\r
        M: 77,\r
        /** Key constant @type Number */\r
        N: 78,\r
        /** Key constant @type Number */\r
        O: 79,\r
        /** Key constant @type Number */\r
        P: 80,\r
        /** Key constant @type Number */\r
        Q: 81,\r
        /** Key constant @type Number */\r
        R: 82,\r
        /** Key constant @type Number */\r
        S: 83,\r
        /** Key constant @type Number */\r
        T: 84,\r
        /** Key constant @type Number */\r
        U: 85,\r
        /** Key constant @type Number */\r
        V: 86,\r
        /** Key constant @type Number */\r
        W: 87,\r
        /** Key constant @type Number */\r
        X: 88,\r
        /** Key constant @type Number */\r
        Y: 89,\r
        /** Key constant @type Number */\r
        Z: 90,\r
        /** Key constant @type Number */\r
        CONTEXT_MENU: 93,\r
        /** Key constant @type Number */\r
        NUM_ZERO: 96,\r
        /** Key constant @type Number */\r
        NUM_ONE: 97,\r
        /** Key constant @type Number */\r
        NUM_TWO: 98,\r
        /** Key constant @type Number */\r
        NUM_THREE: 99,\r
        /** Key constant @type Number */\r
        NUM_FOUR: 100,\r
        /** Key constant @type Number */\r
        NUM_FIVE: 101,\r
        /** Key constant @type Number */\r
        NUM_SIX: 102,\r
        /** Key constant @type Number */\r
        NUM_SEVEN: 103,\r
        /** Key constant @type Number */\r
        NUM_EIGHT: 104,\r
        /** Key constant @type Number */\r
        NUM_NINE: 105,\r
        /** Key constant @type Number */\r
        NUM_MULTIPLY: 106,\r
        /** Key constant @type Number */\r
        NUM_PLUS: 107,\r
        /** Key constant @type Number */\r
        NUM_MINUS: 109,\r
        /** Key constant @type Number */\r
        NUM_PERIOD: 110,\r
        /** Key constant @type Number */\r
        NUM_DIVISION: 111,\r
        /** Key constant @type Number */\r
        F1: 112,\r
        /** Key constant @type Number */\r
        F2: 113,\r
        /** Key constant @type Number */\r
        F3: 114,\r
        /** Key constant @type Number */\r
        F4: 115,\r
        /** Key constant @type Number */\r
        F5: 116,\r
        /** Key constant @type Number */\r
        F6: 117,\r
        /** Key constant @type Number */\r
        F7: 118,\r
        /** Key constant @type Number */\r
        F8: 119,\r
        /** Key constant @type Number */\r
        F9: 120,\r
        /** Key constant @type Number */\r
        F10: 121,\r
        /** Key constant @type Number */\r
        F11: 122,\r
        /** Key constant @type Number */\r
        F12: 123,\r
\r
        /**\r
         * The mouse wheel delta scaling factor. This value depends on browser version and OS and\r
         * attempts to produce a similar scrolling experience across all platforms and browsers.\r
         *\r
         * To change this value:\r
         *\r
         *      Ext.event.Event.prototype.WHEEL_SCALE = 72;\r
         *\r
         * @type Number\r
         * @property\r
         */\r
        WHEEL_SCALE: (function () {\r
            var scale;\r
\r
            if (Ext.isGecko) {\r
                // Firefox uses 3 on all platforms\r
                scale = 3;\r
            } else if (Ext.isMac) {\r
                // Continuous scrolling devices have momentum and produce much more scroll than\r
                // discrete devices on the same OS and browser. To make things exciting, Safari\r
                // (and not Chrome) changed from small values to 120 (like IE).\r
\r
                if (Ext.isSafari && Ext.webKitVersion >= 532.0) {\r
                    // Safari changed the scrolling factor to match IE (for details see\r
                    // https://bugs.webkit.org/show_bug.cgi?id=24368). The WebKit version where this\r
                    // change was introduced was 532.0\r
                    //      Detailed discussion:\r
                    //      https://bugs.webkit.org/show_bug.cgi?id=29601\r
                    //      http://trac.webkit.org/browser/trunk/WebKit/chromium/src/mac/WebInputEventFactory.mm#L1063\r
                    scale = 120;\r
                } else {\r
                    // MS optical wheel mouse produces multiples of 12 which is close enough\r
                    // to help tame the speed of the continuous mice...\r
                    scale = 12;\r
                }\r
\r
                // Momentum scrolling produces very fast scrolling, so increase the scale factor\r
                // to help produce similar results cross platform. This could be even larger and\r
                // it would help those mice, but other mice would become almost unusable as a\r
                // result (since we cannot tell which device type is in use).\r
                scale *= 3;\r
            } else {\r
                // IE, Opera and other Windows browsers use 120.\r
                scale = 120;\r
            }\r
\r
            return scale;\r
        }())\r
    },\r
    keyCodes = {},\r
    keyName, keyCode;\r
\r
    Ext.apply(Event, constants);\r
    Ext.apply(prototype, constants);\r
    \r
    // Don't need that\r
    delete constants.WHEEL_SCALE;\r
    \r
    // ENTER and RETURN has the same keyCode, but since RETURN\r
    // comes later it will win over ENTER down there. However\r
    // ENTER is used more often and feels more natural.\r
    delete constants.RETURN;\r
    \r
    // We need this to do reverse lookup of key name by its code\r
    for (keyName in constants) {\r
        keyCode = constants[keyName];\r
        keyCodes[keyCode] = keyName;\r
    }\r
    \r
    prototype.keyCodes = keyCodes;\r
    \r
    /**\r
     * @private\r
     * Returns the X and Y coordinates of this event without regard to any RTL\r
     * direction settings.\r
     */\r
    prototype.getTrueXY = prototype.getXY;\r
});\r