Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / EventManager.html
index 0de8442..5f472c2 100644 (file)
+<!DOCTYPE html>
 <html>
 <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.EventManager"></div>/**
- * @class Ext.EventManager
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-EventManager'>/**
+</span> * @class Ext.EventManager
  * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
  * several useful events directly.
  * See {@link Ext.EventObject} for more details on normalized event objects.
  * @singleton
  */
-Ext.EventManager = function(){
-    var docReadyEvent, 
-        docReadyProcId, 
-        docReadyState = false,        
-        E = Ext.lib.Event,
-        D = Ext.lib.Dom,
-        DOC = document,
-        WINDOW = window,
-        IEDEFERED = "ie-deferred-loader",
-        DOMCONTENTLOADED = "DOMContentLoaded",
-        elHash = {},
-        propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
-
-    /// There is some jquery work around stuff here that isn't needed in Ext Core.
-    function addListener(el, ename, fn, wrap, scope){        
-        var id = Ext.id(el),
-            es = elHash[id] = elHash[id] || {};         
-       
-        (es[ename] = es[ename] || []).push([fn, wrap, scope]);
-        E.on(el, ename, wrap);
-
-        // this is a workaround for jQuery and should somehow be removed from Ext Core in the future
-        // without breaking ExtJS.
-        if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
-            var args = ["DOMMouseScroll", wrap, false];
-            el.addEventListener.apply(el, args);
-            E.on(window, 'unload', function(){
-                el.removeEventListener.apply(el, args);                
-            });
+Ext.EventManager = {
+
+    // --------------------- onReady ---------------------
+
+<span id='Ext-EventManager-property-hasBoundOnReady'>    /**
+</span>     * Check if we have bound our global onReady listener
+     * @private
+     */
+    hasBoundOnReady: false,
+
+<span id='Ext-EventManager-property-hasFiredReady'>    /**
+</span>     * Check if fireDocReady has been called
+     * @private
+     */
+    hasFiredReady: false,
+
+<span id='Ext-EventManager-property-readyTimeout'>    /**
+</span>     * Timer for the document ready event in old IE versions
+     * @private
+     */
+    readyTimeout: null,
+
+<span id='Ext-EventManager-property-hasOnReadyStateChange'>    /**
+</span>     * Checks if we have bound an onreadystatechange event
+     * @private
+     */
+    hasOnReadyStateChange: false,
+
+<span id='Ext-EventManager-property-readyEvent'>    /**
+</span>     * Holds references to any onReady functions
+     * @private
+     */
+    readyEvent: new Ext.util.Event(),
+
+<span id='Ext-EventManager-method-checkReadyState'>    /**
+</span>     * Check the ready state for old IE versions
+     * @private
+     * @return {Boolean} True if the document is ready
+     */
+    checkReadyState: function(){
+        var me = Ext.EventManager;
+
+        if(window.attachEvent){
+            // See here for reference: http://javascript.nwbox.com/IEContentLoaded/
+            // licensed courtesy of http://developer.yahoo.com/yui/license.html
+            if (window != top) {
+                return false;
+            }
+            try{
+                document.documentElement.doScroll('left');
+            }catch(e){
+                return false;
+            }
+            me.fireDocReady();
+            return true;
         }
-        if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
-            Ext.EventManager.stoppedMouseDownEvent.addListener(wrap);
+        if (document.readyState == 'complete') {
+            me.fireDocReady();
+            return true;
         }
-    };
-    
-    function fireDocReady(){
-        if(!docReadyState){            
-            Ext.isReady = docReadyState = true;
-            if(docReadyProcId){
-                clearInterval(docReadyProcId);
-            }
-            if(Ext.isGecko || Ext.isOpera) {
-                DOC.removeEventListener(DOMCONTENTLOADED, fireDocReady, false);
-            }
-            if(Ext.isIE){
-                var defer = DOC.getElementById(IEDEFERED);
-                if(defer){
-                    defer.onreadystatechange = null;
-                    defer.parentNode.removeChild(defer);
+        me.readyTimeout = setTimeout(arguments.callee, 2);
+        return false;
+    },
+
+<span id='Ext-EventManager-method-bindReadyEvent'>    /**
+</span>     * Binds the appropriate browser event for checking if the DOM has loaded.
+     * @private
+     */
+    bindReadyEvent: function(){
+        var me = Ext.EventManager;
+        if (me.hasBoundOnReady) {
+            return;
+        }
+
+        if (document.addEventListener) {
+            document.addEventListener('DOMContentLoaded', me.fireDocReady, false);
+            // fallback, load will ~always~ fire
+            window.addEventListener('load', me.fireDocReady, false);
+        } else {
+            // check if the document is ready, this will also kick off the scroll checking timer
+            if (!me.checkReadyState()) {
+                document.attachEvent('onreadystatechange', me.checkReadyState);
+                me.hasOnReadyStateChange = true;
+            }
+            // fallback, onload will ~always~ fire
+            window.attachEvent('onload', me.fireDocReady, false);
+        }
+        me.hasBoundOnReady = true;
+    },
+
+<span id='Ext-EventManager-method-fireDocReady'>    /**
+</span>     * We know the document is loaded, so trigger any onReady events.
+     * @private
+     */
+    fireDocReady: function(){
+        var me = Ext.EventManager;
+
+        // only unbind these events once
+        if (!me.hasFiredReady) {
+            me.hasFiredReady = true;
+
+            if (document.addEventListener) {
+                document.removeEventListener('DOMContentLoaded', me.fireDocReady, false);
+                window.removeEventListener('load', me.fireDocReady, false);
+            } else {
+                if (me.readyTimeout !== null) {
+                    clearTimeout(me.readyTimeout);
+                }
+                if (me.hasOnReadyStateChange) {
+                    document.detachEvent('onreadystatechange', me.checkReadyState);
                 }
+                window.detachEvent('onload', me.fireDocReady);
             }
-            if(docReadyEvent){
-                docReadyEvent.fire();
-                docReadyEvent.clearListeners();
+            Ext.supports.init();
+        }
+        if (!Ext.isReady) {
+            Ext.isReady = true;
+            me.onWindowUnload();
+            me.readyEvent.fire();
+        }
+    },
+
+<span id='Ext-EventManager-method-onDocumentReady'>    /**
+</span>     * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be
+     * accessed shorthanded as Ext.onReady().
+     * @param {Function} fn The method the event invokes.
+     * @param {Object} scope (optional) The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the handler function executes. Defaults to the browser window.
+     * @param {Boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}.
+     */
+    onDocumentReady: function(fn, scope, options){
+        options = options || {};
+        var me = Ext.EventManager,
+            readyEvent = me.readyEvent;
+
+        // force single to be true so our event is only ever fired once.
+        options.single = true;
+
+        // Document already loaded, let's just fire it
+        if (Ext.isReady) {
+            readyEvent.addListener(fn, scope, options);
+            readyEvent.fire();
+        } else {
+            options.delay = options.delay || 1;
+            readyEvent.addListener(fn, scope, options);
+            me.bindReadyEvent();
+        }
+    },
+
+
+    // --------------------- event binding ---------------------
+
+<span id='Ext-EventManager-property-stoppedMouseDownEvent'>    /**
+</span>     * Contains a list of all document mouse downs, so we can ensure they fire even when stopEvent is called.
+     * @private
+     */
+    stoppedMouseDownEvent: new Ext.util.Event(),
+
+<span id='Ext-EventManager-property-propRe'>    /**
+</span>     * Options to parse for the 4th argument to addListener.
+     * @private
+     */
+    propRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|freezeEvent)$/,
+
+<span id='Ext-EventManager-method-getId'>    /**
+</span>     * Get the id of the element. If one has not been assigned, automatically assign it.
+     * @param {HTMLElement/Ext.Element} element The element to get the id for.
+     * @return {String} id
+     */
+    getId : function(element) {
+        var skipGarbageCollection = false,
+            id;
+
+        element = Ext.getDom(element);
+
+        if (element === document || element === window) {
+            id = element === document ? Ext.documentId : Ext.windowId;
+        }
+        else {
+            id = Ext.id(element);
+        }
+        // skip garbage collection for special elements (window, document, iframes)
+        if (element &amp;&amp; (element.getElementById || element.navigator)) {
+            skipGarbageCollection = true;
+        }
+
+        if (!Ext.cache[id]){
+            Ext.Element.addToCache(new Ext.Element(element), id);
+            if (skipGarbageCollection) {
+                Ext.cache[id].skipGarbageCollection = true;
             }
         }
-    };
+        return id;
+    },
 
-    function initDocReady(){
-        var COMPLETE = "complete";
-            
-        docReadyEvent = new Ext.util.Event();
-        if (Ext.isGecko || Ext.isOpera) {
-            DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);
-        } else if (Ext.isIE){
-            DOC.write("<s"+'cript id=' + IEDEFERED + ' defer="defer" src="/'+'/:"></s'+"cript>");            
-            DOC.getElementById(IEDEFERED).onreadystatechange = function(){
-                if(this.readyState == COMPLETE){
-                    fireDocReady();
-                }
-            };
-        } else if (Ext.isWebKit){
-            docReadyProcId = setInterval(function(){                
-                if(DOC.readyState == COMPLETE) {
-                    fireDocReady();
-                 }
-            }, 10);
-        }
-        // no matter what, make sure it fires on load
-        E.on(WINDOW, "load", fireDocReady);
-    };
+<span id='Ext-EventManager-method-prepareListenerConfig'>    /**
+</span>     * Convert a &quot;config style&quot; listener into a set of flat arguments so they can be passed to addListener
+     * @private
+     * @param {Object} element The element the event is for
+     * @param {Object} event The event configuration
+     * @param {Object} isRemove True if a removal should be performed, otherwise an add will be done.
+     */
+    prepareListenerConfig: function(element, config, isRemove){
+        var me = this,
+            propRe = me.propRe,
+            key, value, args;
+
+        // loop over all the keys in the object
+        for (key in config) {
+            if (config.hasOwnProperty(key)) {
+                // if the key is something else then an event option
+                if (!propRe.test(key)) {
+                    value = config[key];
+                    // if the value is a function it must be something like click: function(){}, scope: this
+                    // which means that there might be multiple event listeners with shared options
+                    if (Ext.isFunction(value)) {
+                        // shared options
+                        args = [element, key, value, config.scope, config];
+                    } else {
+                        // if its not a function, it must be an object like click: {fn: function(){}, scope: this}
+                        args = [element, key, value.fn, value.scope, value];
+                    }
 
-    function createTargeted(h, o){
-        return function(){
-            var args = Ext.toArray(arguments);
-            if(o.target == Ext.EventObject.setEvent(args[0]).target){
-                h.apply(this, args);
+                    if (isRemove === true) {
+                        me.removeListener.apply(this, args);
+                    } else {
+                        me.addListener.apply(me, args);
+                    }
+                }
             }
-        };
-    };    
-    
-    function createBuffered(h, o){
-        var task = new Ext.util.DelayedTask(h);
-        return function(e){
-            // create new event object impl so new events don't wipe out properties            
-            task.delay(o.buffer, h, null, [new Ext.EventObjectImpl(e)]);
-        };
-    };
+        }
+    },
 
-    function createSingle(h, el, ename, fn, scope){
-        return function(e){
-            Ext.EventManager.removeListener(el, ename, fn, scope);
-            h(e);
+<span id='Ext-EventManager-method-normalizeEvent'>    /**
+</span>     * Normalize cross browser event differences
+     * @private
+     * @param {Object} eventName The event name
+     * @param {Object} fn The function to execute
+     * @return {Object} The new event name/function
+     */
+    normalizeEvent: function(eventName, fn){
+        if (/mouseenter|mouseleave/.test(eventName) &amp;&amp; !Ext.supports.MouseEnterLeave) {
+            if (fn) {
+                fn = Ext.Function.createInterceptor(fn, this.contains, this);
+            }
+            eventName = eventName == 'mouseenter' ? 'mouseover' : 'mouseout';
+        } else if (eventName == 'mousewheel' &amp;&amp; !Ext.supports.MouseWheel &amp;&amp; !Ext.isOpera){
+            eventName = 'DOMMouseScroll';
+        }
+        return {
+            eventName: eventName,
+            fn: fn
         };
-    };
+    },
 
-    function createDelayed(h, o){
-        return function(e){
-            // create new event object impl so new events don't wipe out properties   
-            e = new Ext.EventObjectImpl(e);
-            setTimeout(function(){
-                h(e);
-            }, o.delay || 10);
-        };
-    };
+<span id='Ext-EventManager-method-contains'>    /**
+</span>     * Checks whether the event's relatedTarget is contained inside (or &lt;b&gt;is&lt;/b&gt;) the element.
+     * @private
+     * @param {Object} event
+     */
+    contains: function(event){
+        var parent = event.browserEvent.currentTarget,
+            child = this.getRelatedTarget(event);
 
-    function listen(element, ename, opt, fn, scope){
-        var o = !Ext.isObject(opt) ? {} : opt,
-            el = Ext.getDom(element);
-            
-        fn = fn || o.fn; 
-        scope = scope || o.scope;
-        
-        if(!el){
-            throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
-        }
-        function h(e){
-            // prevent errors while unload occurring
-            if(!Ext){// !window[xname]){  ==> can't we do this? 
-                return;
-            }
-            e = Ext.EventObject.setEvent(e);
-            var t;
-            if (o.delegate) {
-                if(!(t = e.getTarget(o.delegate, el))){
-                    return;
+        if (parent &amp;&amp; parent.firstChild) {
+            while (child) {
+                if (child === parent) {
+                    return false;
+                }
+                child = child.parentNode;
+                if (child &amp;&amp; (child.nodeType != 1)) {
+                    child = null;
                 }
-            } else {
-                t = e.target;
-            }            
-            if (o.stopEvent) {
-                e.stopEvent();
-            }
-            if (o.preventDefault) {
-               e.preventDefault();
             }
-            if (o.stopPropagation) {
-                e.stopPropagation();
+        }
+        return true;
+    },
+
+<span id='Ext-EventManager-method-addListener'>    /**
+</span>    * Appends an event handler to an element.  The shorthand version {@link #on} is equivalent.  Typically you will
+    * use {@link Ext.Element#addListener} directly on an Element in favor of calling this version.
+    * @param {String/HTMLElement} el The html element or id to assign the event handler to.
+    * @param {String} eventName The name of the event to listen for.
+    * @param {Function} handler The handler function the event invokes. This function is passed
+    * the following parameters:&lt;ul&gt;
+    * &lt;li&gt;evt : EventObject&lt;div class=&quot;sub-desc&quot;&gt;The {@link Ext.EventObject EventObject} describing the event.&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;t : Element&lt;div class=&quot;sub-desc&quot;&gt;The {@link Ext.Element Element} which was the target of the event.
+    * Note that this may be filtered by using the &lt;tt&gt;delegate&lt;/tt&gt; option.&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;o : Object&lt;div class=&quot;sub-desc&quot;&gt;The options object from the addListener call.&lt;/div&gt;&lt;/li&gt;
+    * &lt;/ul&gt;
+    * @param {Object} scope (optional) The scope (&lt;b&gt;&lt;code&gt;this&lt;/code&gt;&lt;/b&gt; reference) in which the handler function is executed. &lt;b&gt;Defaults to the Element&lt;/b&gt;.
+    * @param {Object} options (optional) An object containing handler configuration properties.
+    * This may contain any of the following properties:&lt;ul&gt;
+    * &lt;li&gt;scope : Object&lt;div class=&quot;sub-desc&quot;&gt;The scope (&lt;b&gt;&lt;code&gt;this&lt;/code&gt;&lt;/b&gt; reference) in which the handler function is executed. &lt;b&gt;Defaults to the Element&lt;/b&gt;.&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;delegate : String&lt;div class=&quot;sub-desc&quot;&gt;A simple selector to filter the target or look for a descendant of the target&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;stopEvent : Boolean&lt;div class=&quot;sub-desc&quot;&gt;True to stop the event. That is stop propagation, and prevent the default action.&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;preventDefault : Boolean&lt;div class=&quot;sub-desc&quot;&gt;True to prevent the default action&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;stopPropagation : Boolean&lt;div class=&quot;sub-desc&quot;&gt;True to prevent event propagation&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;normalized : Boolean&lt;div class=&quot;sub-desc&quot;&gt;False to pass a browser event to the handler function instead of an Ext.EventObject&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;delay : Number&lt;div class=&quot;sub-desc&quot;&gt;The number of milliseconds to delay the invocation of the handler after te event fires.&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;single : Boolean&lt;div class=&quot;sub-desc&quot;&gt;True to add a handler to handle just the next firing of the event, and then remove itself.&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;buffer : Number&lt;div class=&quot;sub-desc&quot;&gt;Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
+    * by the specified number of milliseconds. If the event fires again within that time, the original
+    * handler is &lt;em&gt;not&lt;/em&gt; invoked, but the new handler is scheduled in its place.&lt;/div&gt;&lt;/li&gt;
+    * &lt;li&gt;target : Element&lt;div class=&quot;sub-desc&quot;&gt;Only call the handler if the event was fired on the target Element, &lt;i&gt;not&lt;/i&gt; if the event was bubbled up from a child node.&lt;/div&gt;&lt;/li&gt;
+    * &lt;/ul&gt;&lt;br&gt;
+    * &lt;p&gt;See {@link Ext.Element#addListener} for examples of how to use these options.&lt;/p&gt;
+    */
+    addListener: function(element, eventName, fn, scope, options){
+        // Check if we've been passed a &quot;config style&quot; event.
+        if (typeof eventName !== 'string') {
+            this.prepareListenerConfig(element, eventName);
+            return;
+        }
+
+        var dom = Ext.getDom(element),
+            bind,
+            wrap;
+
+        //&lt;debug&gt;
+        if (!dom){
+            Ext.Error.raise({
+                sourceClass: 'Ext.EventManager',
+                sourceMethod: 'addListener',
+                targetElement: element,
+                eventName: eventName,
+                msg: 'Error adding &quot;' + eventName + '\&quot; listener for nonexistent element &quot;' + element + '&quot;'
+            });
+        }
+        if (!fn) {
+            Ext.Error.raise({
+                sourceClass: 'Ext.EventManager',
+                sourceMethod: 'addListener',
+                targetElement: element,
+                eventName: eventName,
+                msg: 'Error adding &quot;' + eventName + '\&quot; listener. The handler function is undefined.'
+            });
+        }
+        //&lt;/debug&gt;
+
+        // create the wrapper function
+        options = options || {};
+
+        bind = this.normalizeEvent(eventName, fn);
+        wrap = this.createListenerWrap(dom, eventName, bind.fn, scope, options);
+
+
+        if (dom.attachEvent) {
+            dom.attachEvent('on' + bind.eventName, wrap);
+        } else {
+            dom.addEventListener(bind.eventName, wrap, options.capture || false);
+        }
+
+        if (dom == document &amp;&amp; eventName == 'mousedown') {
+            this.stoppedMouseDownEvent.addListener(wrap);
+        }
+
+        // add all required data into the event cache
+        this.getEventListenerCache(dom, eventName).push({
+            fn: fn,
+            wrap: wrap,
+            scope: scope
+        });
+    },
+
+<span id='Ext-EventManager-method-removeListener'>    /**
+</span>    * Removes an event handler from an element.  The shorthand version {@link #un} is equivalent.  Typically
+    * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version.
+    * @param {String/HTMLElement} el The id or html element from which to remove the listener.
+    * @param {String} eventName The name of the event.
+    * @param {Function} fn The handler function to remove. &lt;b&gt;This must be a reference to the function passed into the {@link #addListener} call.&lt;/b&gt;
+    * @param {Object} scope If a scope (&lt;b&gt;&lt;code&gt;this&lt;/code&gt;&lt;/b&gt; reference) was specified when the listener was added,
+    * then this must refer to the same object.
+    */
+    removeListener : function(element, eventName, fn, scope) {
+        // handle our listener config object syntax
+        if (typeof eventName !== 'string') {
+            this.prepareListenerConfig(element, eventName, true);
+            return;
+        }
+
+        var dom = Ext.getDom(element),
+            cache = this.getEventListenerCache(dom, eventName),
+            bindName = this.normalizeEvent(eventName).eventName,
+            i = cache.length, j,
+            listener, wrap, tasks;
+
+
+        while (i--) {
+            listener = cache[i];
+
+            if (listener &amp;&amp; (!fn || listener.fn == fn) &amp;&amp; (!scope || listener.scope === scope)) {
+                wrap = listener.wrap;
+
+                // clear buffered calls
+                if (wrap.task) {
+                    clearTimeout(wrap.task);
+                    delete wrap.task;
+                }
+
+                // clear delayed calls
+                j = wrap.tasks &amp;&amp; wrap.tasks.length;
+                if (j) {
+                    while (j--) {
+                        clearTimeout(wrap.tasks[j]);
+                    }
+                    delete wrap.tasks;
+                }
+
+                if (dom.detachEvent) {
+                    dom.detachEvent('on' + bindName, wrap);
+                } else {
+                    dom.removeEventListener(bindName, wrap, false);
+                }
+
+                if (wrap &amp;&amp; dom == document &amp;&amp; eventName == 'mousedown') {
+                    this.stoppedMouseDownEvent.removeListener(wrap);
+                }
+
+                // remove listener from cache
+                Ext.Array.erase(cache, i, 1);
             }
-            if (o.normalized) {
-                e = e.browserEvent;
+        }
+    },
+
+<span id='Ext-EventManager-method-removeAll'>    /**
+</span>    * Removes all event handers from an element.  Typically you will use {@link Ext.Element#removeAllListeners}
+    * directly on an Element in favor of calling this version.
+    * @param {String/HTMLElement} el The id or html element from which to remove all event handlers.
+    */
+    removeAll : function(element){
+        var dom = Ext.getDom(element),
+            cache, ev;
+        if (!dom) {
+            return;
+        }
+        cache = this.getElementEventCache(dom);
+
+        for (ev in cache) {
+            if (cache.hasOwnProperty(ev)) {
+                this.removeListener(dom, ev);
             }
-            
-            fn.call(scope || el, e, t, o);
-        };
-        if(o.target){
-            h = createTargeted(h, o);
         }
-        if(o.delay){
-            h = createDelayed(h, o);
+        Ext.cache[dom.id].events = {};
+    },
+
+<span id='Ext-EventManager-method-purgeElement'>    /**
+</span>     * Recursively removes all previous added listeners from an element and its children. Typically you will use {@link Ext.Element#purgeAllListeners}
+     * directly on an Element in favor of calling this version.
+     * @param {String/HTMLElement} el The id or html element from which to remove all event handlers.
+     * @param {String} eventName (optional) The name of the event.
+     */
+    purgeElement : function(element, eventName) {
+        var dom = Ext.getDom(element),
+            i = 0, len;
+
+        if(eventName) {
+            this.removeListener(dom, eventName);
         }
-        if(o.single){
-            h = createSingle(h, el, ename, fn, scope);
+        else {
+            this.removeAll(dom);
         }
-        if(o.buffer){
-            h = createBuffered(h, o);
+
+        if(dom &amp;&amp; dom.childNodes) {
+            for(len = element.childNodes.length; i &lt; len; i++) {
+                this.purgeElement(element.childNodes[i], eventName);
+            }
         }
+    },
 
-        addListener(el, ename, fn, h, scope);
-        return h;
-    };
+<span id='Ext-EventManager-method-createListenerWrap'>    /**
+</span>     * Create the wrapper function for the event
+     * @private
+     * @param {HTMLElement} dom The dom element
+     * @param {String} ename The event name
+     * @param {Function} fn The function to execute
+     * @param {Object} scope The scope to execute callback in
+     * @param {Object} options The options
+     * @return {Function} the wrapper function
+     */
+    createListenerWrap : function(dom, ename, fn, scope, options) {
+        options = options || {};
 
-    var pub = {
-        <div id="method-Ext.EventManager-addListener"></div>/**
-         * Appends an event handler to an element.  The shorthand version {@link #on} is equivalent.  Typically you will
-         * use {@link Ext.Element#addListener} directly on an Element in favor of calling this version.
-         * @param {String/HTMLElement} el The html element or id to assign the event handler to.
-         * @param {String} eventName The name of the event to listen for.
-         * @param {Function} handler The handler function the event invokes. This function is passed
-         * the following parameters:<ul>
-         * <li>evt : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
-         * <li>t : Element<div class="sub-desc">The {@link Ext.Element Element} which was the target of the event.
-         * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
-         * <li>o : Object<div class="sub-desc">The options object from the addListener call.</div></li>
-         * </ul>
-         * @param {Object} scope (optional) The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.
-         * @param {Object} options (optional) An object containing handler configuration properties.
-         * This may contain any of the following properties:<ul>
-         * <li>scope : Object<div class="sub-desc">The scope (<b><code>this</code></b> reference) in which the handler function is executed. <b>Defaults to the Element</b>.</div></li>
-         * <li>delegate : String<div class="sub-desc">A simple selector to filter the target or look for a descendant of the target</div></li>
-         * <li>stopEvent : Boolean<div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
-         * <li>preventDefault : Boolean<div class="sub-desc">True to prevent the default action</div></li>
-         * <li>stopPropagation : Boolean<div class="sub-desc">True to prevent event propagation</div></li>
-         * <li>normalized : Boolean<div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
-         * <li>delay : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after te event fires.</div></li>
-         * <li>single : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
-         * <li>buffer : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
-         * by the specified number of milliseconds. If the event fires again within that time, the original
-         * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
-         * <li>target : Element<div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
-         * </ul><br>
-         * <p>See {@link Ext.Element#addListener} for examples of how to use these options.</p>
-         */
-        addListener : function(element, eventName, fn, scope, options){                                       
-            if(Ext.isObject(eventName)){                
-                var o = eventName, e, val;
-                for(e in o){
-                    val = o[e];
-                    if(!propRe.test(e)){                                             
-                        if(Ext.isFunction(val)){
-                            // shared options
-                            listen(element, e, o, val, o.scope);
-                        }else{
-                            // individual options
-                            listen(element, e, val);
-                        }
+        var f, gen;
+
+        return function wrap(e, args) {
+            // Compile the implementation upon first firing
+            if (!gen) {
+                f = ['if(!Ext) {return;}'];
+
+                if(options.buffer || options.delay || options.freezeEvent) {
+                    f.push('e = new Ext.EventObjectImpl(e, ' + (options.freezeEvent ? 'true' : 'false' ) + ');');
+                } else {
+                    f.push('e = Ext.EventObject.setEvent(e);');
+                }
+
+                if (options.delegate) {
+                    f.push('var t = e.getTarget(&quot;' + options.delegate + '&quot;, this);');
+                    f.push('if(!t) {return;}');
+                } else {
+                    f.push('var t = e.target;');
+                }
+
+                if (options.target) {
+                    f.push('if(e.target !== options.target) {return;}');
+                }
+
+                if(options.stopEvent) {
+                    f.push('e.stopEvent();');
+                } else {
+                    if(options.preventDefault) {
+                        f.push('e.preventDefault();');
+                    }
+                    if(options.stopPropagation) {
+                        f.push('e.stopPropagation();');
                     }
                 }
-            } else {
-                listen(element, eventName, options, fn, scope);
-            }
-        },
-        
-        <div id="method-Ext.EventManager-removeListener"></div>/**
-         * Removes an event handler from an element.  The shorthand version {@link #un} is equivalent.  Typically
-         * you will use {@link Ext.Element#removeListener} directly on an Element in favor of calling this version.
-         * @param {String/HTMLElement} el The id or html element from which to remove the listener.
-         * @param {String} eventName The name of the event.
-         * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
-         * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
-         * then this must refer to the same object.
-         */
-        removeListener : function(element, eventName, fn, scope){            
-            var el = Ext.getDom(element),
-                id = Ext.id(el),
-                wrap;      
-            
-            Ext.each((elHash[id] || {})[eventName], function (v,i,a) {
-                if (Ext.isArray(v) && v[0] == fn && (!scope || v[2] == scope)) {                                    
-                    E.un(el, eventName, wrap = v[1]);
-                    a.splice(i,1);
-                    return false;                    
+
+                if(options.normalized === false) {
+                    f.push('e = e.browserEvent;');
                 }
-            });    
-
-            // jQuery workaround that should be removed from Ext Core
-            if(eventName == "mousewheel" && el.addEventListener && wrap){
-                el.removeEventListener("DOMMouseScroll", wrap, false);
-            }
-                        
-            if(eventName == "mousedown" && el == DOC && wrap){ // fix stopped mousedowns on the document
-                Ext.EventManager.stoppedMouseDownEvent.removeListener(wrap);
-            }
-        },
-        
-        <div id="method-Ext.EventManager-removeAll"></div>/**
-         * Removes all event handers from an element.  Typically you will use {@link Ext.Element#removeAllListeners}
-         * directly on an Element in favor of calling this version.
-         * @param {String/HTMLElement} el The id or html element from which to remove all event handlers.
-         */
-        removeAll : function(el){
-            var id = Ext.id(el = Ext.getDom(el)), 
-                es = elHash[id],                 
-                ename;
-           
-            for(ename in es){
-                if(es.hasOwnProperty(ename)){                        
-                    Ext.each(es[ename], function(v) {
-                        E.un(el, ename, v.wrap);                    
-                    });
-                }            
-            }
-            elHash[id] = null;       
-        },
-
-        <div id="method-Ext.EventManager-onDocumentReady"></div>/**
-         * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Can be
-         * accessed shorthanded as Ext.onReady().
-         * @param {Function} fn The method the event invokes.
-         * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
-         * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
-         * <code>{single: true}</code> be used so that the handler is removed on first invocation.
-         */
-        onDocumentReady : function(fn, scope, options){
-            if(docReadyState){ // if it already fired
-                docReadyEvent.addListener(fn, scope, options);
-                docReadyEvent.fire();
-                docReadyEvent.clearListeners();               
-            } else {
-                if(!docReadyEvent) initDocReady();
-                options = options || {};
-                options.delay = options.delay || 1;                
-                docReadyEvent.addListener(fn, scope, options);
-            }
-        },
-        
-        elHash : elHash   
-    };
-     <div id="method-Ext.EventManager-on"></div>/**
-     * Appends an event handler to an element.  Shorthand for {@link #addListener}.
-     * @param {String/HTMLElement} el The html element or id to assign the event handler to
-     * @param {String} eventName The name of the event to listen for.
-     * @param {Function} handler The handler function the event invokes.
-     * @param {Object} scope (optional) (<code>this</code> reference) in which the handler function executes. <b>Defaults to the Element</b>.
-     * @param {Object} options (optional) An object containing standard {@link #addListener} options
-     * @member Ext.EventManager
-     * @method on
-     */
-    pub.on = pub.addListener;
-    <div id="method-Ext.EventManager-un"></div>/**
-     * Removes an event handler from an element.  Shorthand for {@link #removeListener}.
-     * @param {String/HTMLElement} el The id or html element from which to remove the listener.
-     * @param {String} eventName The name of the event.
-     * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #on} call.</b>
-     * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
-     * then this must refer to the same object.
-     * @member Ext.EventManager
-     * @method un
-     */
-    pub.un = pub.removeListener;
-
-    pub.stoppedMouseDownEvent = new Ext.util.Event();
-    return pub;
-}();
-<div id="method-Ext-onReady"></div>/**
-  * Adds a listener to be notified when the document is ready (before onload and before images are loaded). Shorthand of {@link Ext.EventManager#onDocumentReady}.
-  * @param {Function} fn The method the event invokes.
-  * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
-  * @param {boolean} options (optional) Options object as passed to {@link Ext.Element#addListener}. It is recommended that the options
-  * <code>{single: true}</code> be used so that the handler is removed on first invocation.
-  * @member Ext
-  * @method onReady
- */
-Ext.onReady = Ext.EventManager.onDocumentReady;
 
+                if(options.buffer) {
+                    f.push('(wrap.task &amp;&amp; clearTimeout(wrap.task));');
+                    f.push('wrap.task = setTimeout(function(){');
+                }
 
-//Initialize doc classes
-(function(){
-    
-    var initExtCss = function(){
-        // find the body element
-        var bd = document.body || document.getElementsByTagName('body')[0];
-        if(!bd){ return false; }
-        var cls = [' ',
-                Ext.isIE ? "ext-ie " + (Ext.isIE6 ? 'ext-ie6' : (Ext.isIE7 ? 'ext-ie7' : 'ext-ie8'))
-                : Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')
-                : Ext.isOpera ? "ext-opera"
-                : Ext.isWebKit ? "ext-webkit" : ""];
+                if(options.delay) {
+                    f.push('wrap.tasks = wrap.tasks || [];');
+                    f.push('wrap.tasks.push(setTimeout(function(){');
+                }
+
+                // finally call the actual handler fn
+                f.push('fn.call(scope || dom, e, t, options);');
+
+                if(options.single) {
+                    f.push('Ext.EventManager.removeListener(dom, ename, fn, scope);');
+                }
+
+                if(options.delay) {
+                    f.push('}, ' + options.delay + '));');
+                }
+
+                if(options.buffer) {
+                    f.push('}, ' + options.buffer + ');');
+                }
+
+                gen = Ext.functionFactory('e', 'options', 'fn', 'scope', 'ename', 'dom', 'wrap', 'args', f.join('\n'));
+            }
+
+            gen.call(dom, e, options, fn, scope, ename, dom, wrap, args);
+        };
+    },
 
-        if(Ext.isSafari){
-            cls.push("ext-safari " + (Ext.isSafari2 ? 'ext-safari2' : (Ext.isSafari3 ? 'ext-safari3' : 'ext-safari4')));
-        }else if(Ext.isChrome){
-            cls.push("ext-chrome");
+<span id='Ext-EventManager-method-getEventListenerCache'>    /**
+</span>     * Get the event cache for a particular element for a particular event
+     * @private
+     * @param {HTMLElement} element The element
+     * @param {Object} eventName The event name
+     * @return {Array} The events for the element
+     */
+    getEventListenerCache : function(element, eventName) {
+        if (!element) {
+            return [];
         }
 
-        if(Ext.isMac){
-            cls.push("ext-mac");
+        var eventCache = this.getElementEventCache(element);
+        return eventCache[eventName] || (eventCache[eventName] = []);
+    },
+
+<span id='Ext-EventManager-method-getElementEventCache'>    /**
+</span>     * Gets the event cache for the object
+     * @private
+     * @param {HTMLElement} element The element
+     * @return {Object} The event cache for the object
+     */
+    getElementEventCache : function(element) {
+        if (!element) {
+            return {};
         }
-        if(Ext.isLinux){
-            cls.push("ext-linux");
+        var elementCache = Ext.cache[this.getId(element)];
+        return elementCache.events || (elementCache.events = {});
+    },
+
+    // --------------------- utility methods ---------------------
+    mouseLeaveRe: /(mouseout|mouseleave)/,
+    mouseEnterRe: /(mouseover|mouseenter)/,
+
+<span id='Ext-EventManager-method-stopEvent'>    /**
+</span>     * Stop the event (preventDefault and stopPropagation)
+     * @param {Event} The event to stop
+     */
+    stopEvent: function(event) {
+        this.stopPropagation(event);
+        this.preventDefault(event);
+    },
+
+<span id='Ext-EventManager-method-stopPropagation'>    /**
+</span>     * Cancels bubbling of the event.
+     * @param {Event} The event to stop bubbling.
+     */
+    stopPropagation: function(event) {
+        event = event.browserEvent || event;
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        } else {
+            event.cancelBubble = true;
         }
+    },
 
-        if(Ext.isStrict || Ext.isBorderBox){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
-            var p = bd.parentNode;
-            if(p){
-                p.className += Ext.isStrict ? ' ext-strict' : ' ext-border-box';
+<span id='Ext-EventManager-method-preventDefault'>    /**
+</span>     * Prevents the browsers default handling of the event.
+     * @param {Event} The event to prevent the default
+     */
+    preventDefault: function(event) {
+        event = event.browserEvent || event;
+        if (event.preventDefault) {
+            event.preventDefault();
+        } else {
+            event.returnValue = false;
+            // Some keys events require setting the keyCode to -1 to be prevented
+            try {
+              // all ctrl + X and F1 -&gt; F12
+              if (event.ctrlKey || event.keyCode &gt; 111 &amp;&amp; event.keyCode &lt; 124) {
+                  event.keyCode = -1;
+              }
+            } catch (e) {
+                // see this outdated document http://support.microsoft.com/kb/934364/en-us for more info
             }
         }
-        bd.className += cls.join(' ');
-        return true;
-    }
+    },
 
-    if(!initExtCss()){
-        Ext.onReady(initExtCss);
-    }
-})();
+<span id='Ext-EventManager-method-getRelatedTarget'>    /**
+</span>     * Gets the related target from the event.
+     * @param {Object} event The event
+     * @return {HTMLElement} The related target.
+     */
+    getRelatedTarget: function(event) {
+        event = event.browserEvent || event;
+        var target = event.relatedTarget;
+        if (!target) {
+            if (this.mouseLeaveRe.test(event.type)) {
+                target = event.toElement;
+            } else if (this.mouseEnterRe.test(event.type)) {
+                target = event.fromElement;
+            }
+        }
+        return this.resolveTextNode(target);
+    },
 
+<span id='Ext-EventManager-method-getPageX'>    /**
+</span>     * Gets the x coordinate from the event
+     * @param {Object} event The event
+     * @return {Number} The x coordinate
+     */
+    getPageX: function(event) {
+        return this.getXY(event)[0];
+    },
 
-<div id="cls-Ext.EventObject"></div>/**
- * @class Ext.EventObject
- * Just as {@link Ext.Element} wraps around a native DOM node, Ext.EventObject 
- * wraps the browser's native event-object normalizing cross-browser differences,
- * such as which mouse button is clicked, keys pressed, mechanisms to stop
- * event-propagation along with a method to prevent default actions from taking place.
- * <p>For example:</p>
- * <pre><code>
-function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
-    e.preventDefault();
-    var target = e.getTarget(); // same as t (the target HTMLElement)
-    ...
-}
-var myDiv = {@link Ext#get Ext.get}("myDiv");  // get reference to an {@link Ext.Element}
-myDiv.on(         // 'on' is shorthand for addListener
-    "click",      // perform an action on click of myDiv
-    handleClick   // reference to the action handler
-);  
-// other methods to do the same:
-Ext.EventManager.on("myDiv", 'click', handleClick);
-Ext.EventManager.addListener("myDiv", 'click', handleClick);
- </code></pre>
- * @singleton
- */
-Ext.EventObject = function(){
-    var E = Ext.lib.Event,
-        // safari keypress events for special keys return bad keycodes
-        safariKeys = {
-            3 : 13, // enter
-            63234 : 37, // left
-            63235 : 39, // right
-            63232 : 38, // up
-            63233 : 40, // down
-            63276 : 33, // page up
-            63277 : 34, // page down
-            63272 : 46, // delete
-            63273 : 36, // home
-            63275 : 35  // end
-        },
-        // normalize button clicks
-        btnMap = Ext.isIE ? {1:0,4:1,2:2} :
-                (Ext.isWebKit ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
-
-    Ext.EventObjectImpl = function(e){
-        if(e){
-            this.setEvent(e.browserEvent || e);
+<span id='Ext-EventManager-method-getPageY'>    /**
+</span>     * Gets the y coordinate from the event
+     * @param {Object} event The event
+     * @return {Number} The y coordinate
+     */
+    getPageY: function(event) {
+        return this.getXY(event)[1];
+    },
+
+<span id='Ext-EventManager-method-getPageXY'>    /**
+</span>     * Gets the x &amp; y coordinate from the event
+     * @param {Object} event The event
+     * @return {Number[]} The x/y coordinate
+     */
+    getPageXY: function(event) {
+        event = event.browserEvent || event;
+        var x = event.pageX,
+            y = event.pageY,
+            doc = document.documentElement,
+            body = document.body;
+
+        // pageX/pageY not available (undefined, not null), use clientX/clientY instead
+        if (!x &amp;&amp; x !== 0) {
+            x = event.clientX + (doc &amp;&amp; doc.scrollLeft || body &amp;&amp; body.scrollLeft || 0) - (doc &amp;&amp; doc.clientLeft || body &amp;&amp; body.clientLeft || 0);
+            y = event.clientY + (doc &amp;&amp; doc.scrollTop  || body &amp;&amp; body.scrollTop  || 0) - (doc &amp;&amp; doc.clientTop  || body &amp;&amp; body.clientTop  || 0);
         }
-    };
+        return [x, y];
+    },
+
+<span id='Ext-EventManager-method-getTarget'>    /**
+</span>     * Gets the target of the event.
+     * @param {Object} event The event
+     * @return {HTMLElement} target
+     */
+    getTarget: function(event) {
+        event = event.browserEvent || event;
+        return this.resolveTextNode(event.target || event.srcElement);
+    },
 
-    Ext.EventObjectImpl.prototype = {
-           /** @private */
-        setEvent : function(e){
-            var me = this;
-            if(e == me || (e && e.browserEvent)){ // already wrapped
-                return e;
-            }
-            me.browserEvent = e;
-            if(e){
-                // normalize buttons
-                me.button = e.button ? btnMap[e.button] : (e.which ? e.which - 1 : -1);
-                if(e.type == 'click' && me.button == -1){
-                    me.button = 0;
+<span id='Ext-EventManager-property-resolveTextNode'>    /**
+</span>     * Resolve any text nodes accounting for browser differences.
+     * @private
+     * @param {HTMLElement} node The node
+     * @return {HTMLElement} The resolved node
+     */
+    // technically no need to browser sniff this, however it makes no sense to check this every time, for every event, whether the string is equal.
+    resolveTextNode: Ext.isGecko ?
+        function(node) {
+            if (!node) {
+                return;
+            }
+            // work around firefox bug, https://bugzilla.mozilla.org/show_bug.cgi?id=101197
+            var s = HTMLElement.prototype.toString.call(node);
+            if (s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]') {
+                return;
+            }
+                return node.nodeType == 3 ? node.parentNode: node;
+            }: function(node) {
+                return node &amp;&amp; node.nodeType == 3 ? node.parentNode: node;
+            },
+
+    // --------------------- custom event binding ---------------------
+
+    // Keep track of the current width/height
+    curWidth: 0,
+    curHeight: 0,
+
+<span id='Ext-EventManager-method-onWindowResize'>    /**
+</span>     * Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds),
+     * passes new viewport width and height to handlers.
+     * @param {Function} fn      The handler function the window resize event invokes.
+     * @param {Object}   scope   The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the handler function executes. Defaults to the browser window.
+     * @param {Boolean}  options Options object as passed to {@link Ext.Element#addListener}
+     */
+    onWindowResize: function(fn, scope, options){
+        var resize = this.resizeEvent;
+        if(!resize){
+            this.resizeEvent = resize = new Ext.util.Event();
+            this.on(window, 'resize', this.fireResize, this, {buffer: 100});
+        }
+        resize.addListener(fn, scope, options);
+    },
+
+<span id='Ext-EventManager-method-fireResize'>    /**
+</span>     * Fire the resize event.
+     * @private
+     */
+    fireResize: function(){
+        var me = this,
+            w = Ext.Element.getViewWidth(),
+            h = Ext.Element.getViewHeight();
+
+         //whacky problem in IE where the resize event will sometimes fire even though the w/h are the same.
+         if(me.curHeight != h || me.curWidth != w){
+             me.curHeight = h;
+             me.curWidth = w;
+             me.resizeEvent.fire(w, h);
+         }
+    },
+
+<span id='Ext-EventManager-method-removeResizeListener'>    /**
+</span>     * Removes the passed window resize listener.
+     * @param {Function} fn        The method the event invokes
+     * @param {Object}   scope    The scope of handler
+     */
+    removeResizeListener: function(fn, scope){
+        if (this.resizeEvent) {
+            this.resizeEvent.removeListener(fn, scope);
+        }
+    },
+
+    onWindowUnload: function() {
+        var unload = this.unloadEvent;
+        if (!unload) {
+            this.unloadEvent = unload = new Ext.util.Event();
+            this.addListener(window, 'unload', this.fireUnload, this);
+        }
+    },
+
+<span id='Ext-EventManager-method-fireUnload'>    /**
+</span>     * Fires the unload event for items bound with onWindowUnload
+     * @private
+     */
+    fireUnload: function() {
+        // wrap in a try catch, could have some problems during unload
+        try {
+            this.removeUnloadListener();
+            // Work around FF3 remembering the last scroll position when refreshing the grid and then losing grid view
+            if (Ext.isGecko3) {
+                var gridviews = Ext.ComponentQuery.query('gridview'),
+                    i = 0,
+                    ln = gridviews.length;
+                for (; i &lt; ln; i++) {
+                    gridviews[i].scrollToTop();
                 }
-                me.type = e.type;
-                me.shiftKey = e.shiftKey;
-                // mac metaKey behaves like ctrlKey
-                me.ctrlKey = e.ctrlKey || e.metaKey || false;
-                me.altKey = e.altKey;
-                // in getKey these will be normalized for the mac
-                me.keyCode = e.keyCode;
-                me.charCode = e.charCode;
-                // cache the target for the delayed and or buffered events
-                me.target = E.getTarget(e);
-                // same for XY
-                me.xy = E.getXY(e);
-            }else{
-                me.button = -1;
-                me.shiftKey = false;
-                me.ctrlKey = false;
-                me.altKey = false;
-                me.keyCode = 0;
-                me.charCode = 0;
-                me.target = null;
-                me.xy = [0, 0];
-            }
-            return me;
-        },
-
-        <div id="method-Ext.EventObject-stopEvent"></div>/**
-         * Stop the event (preventDefault and stopPropagation)
-         */
-        stopEvent : function(){
-            var me = this;
-            if(me.browserEvent){
-                if(me.browserEvent.type == 'mousedown'){
-                    Ext.EventManager.stoppedMouseDownEvent.fire(me);
+            }
+            // Purge all elements in the cache
+            var el,
+                cache = Ext.cache;
+            for (el in cache) {
+                if (cache.hasOwnProperty(el)) {
+                    Ext.EventManager.removeAll(el);
                 }
-                E.stopEvent(me.browserEvent);
-            }
-        },
-
-        <div id="method-Ext.EventObject-preventDefault"></div>/**
-         * Prevents the browsers default handling of the event.
-         */
-        preventDefault : function(){
-            if(this.browserEvent){
-                E.preventDefault(this.browserEvent);
-            }
-        },        
-
-        <div id="method-Ext.EventObject-stopPropagation"></div>/**
-         * Cancels bubbling of the event.
-         */
-        stopPropagation : function(){
-            var me = this;
-            if(me.browserEvent){
-                if(me.browserEvent.type == 'mousedown'){
-                    Ext.EventManager.stoppedMouseDownEvent.fire(me);
+            }
+        } catch(e) {
+        }
+    },
+
+<span id='Ext-EventManager-method-removeUnloadListener'>    /**
+</span>     * Removes the passed window unload listener.
+     * @param {Function} fn        The method the event invokes
+     * @param {Object}   scope    The scope of handler
+     */
+    removeUnloadListener: function(){
+        if (this.unloadEvent) {
+            this.removeListener(window, 'unload', this.fireUnload);
+        }
+    },
+
+<span id='Ext-EventManager-property-useKeyDown'>    /**
+</span>     * note 1: IE fires ONLY the keydown event on specialkey autorepeat
+     * note 2: Safari &lt; 3.1, Gecko (Mac/Linux) &amp; Opera fire only the keypress event on specialkey autorepeat
+     * (research done by Jan Wolter at http://unixpapa.com/js/key.html)
+     * @private
+     */
+    useKeyDown: Ext.isWebKit ?
+                   parseInt(navigator.userAgent.match(/AppleWebKit\/(\d+)/)[1], 10) &gt;= 525 :
+                   !((Ext.isGecko &amp;&amp; !Ext.isWindows) || Ext.isOpera),
+
+<span id='Ext-EventManager-method-getKeyEvent'>    /**
+</span>     * Indicates which event to use for getting key presses.
+     * @return {String} The appropriate event name.
+     */
+    getKeyEvent: function(){
+        return this.useKeyDown ? 'keydown' : 'keypress';
+    }
+};
+
+<span id='Ext-method-onReady'>/**
+</span> * Alias for {@link Ext.Loader#onReady Ext.Loader.onReady} with withDomReady set to true
+ * @member Ext
+ * @method onReady
+ */
+Ext.onReady = function(fn, scope, options) {
+    Ext.Loader.onReady(fn, scope, true, options);
+};
+
+<span id='Ext-method-onDocumentReady'>/**
+</span> * Alias for {@link Ext.EventManager#onDocumentReady Ext.EventManager.onDocumentReady}
+ * @member Ext
+ * @method onDocumentReady
+ */
+Ext.onDocumentReady = Ext.EventManager.onDocumentReady;
+
+<span id='Ext-EventManager-method-on'>/**
+</span> * Alias for {@link Ext.EventManager#addListener Ext.EventManager.addListener}
+ * @member Ext.EventManager
+ * @method on
+ */
+Ext.EventManager.on = Ext.EventManager.addListener;
+
+<span id='Ext-EventManager-method-un'>/**
+</span> * Alias for {@link Ext.EventManager#removeListener Ext.EventManager.removeListener}
+ * @member Ext.EventManager
+ * @method un
+ */
+Ext.EventManager.un = Ext.EventManager.removeListener;
+
+(function(){
+    var initExtCss = function() {
+        // find the body element
+        var bd = document.body || document.getElementsByTagName('body')[0],
+            baseCSSPrefix = Ext.baseCSSPrefix,
+            cls = [baseCSSPrefix + 'body'],
+            htmlCls = [],
+            html;
+
+        if (!bd) {
+            return false;
+        }
+
+        html = bd.parentNode;
+
+        function add (c) {
+            cls.push(baseCSSPrefix + c);
+        }
+
+        //Let's keep this human readable!
+        if (Ext.isIE) {
+            add('ie');
+
+            // very often CSS needs to do checks like &quot;IE7+&quot; or &quot;IE6 or 7&quot;. To help
+            // reduce the clutter (since CSS/SCSS cannot do these tests), we add some
+            // additional classes:
+            //
+            //      x-ie7p      : IE7+      :  7 &lt;= ieVer
+            //      x-ie7m      : IE7-      :  ieVer &lt;= 7
+            //      x-ie8p      : IE8+      :  8 &lt;= ieVer
+            //      x-ie8m      : IE8-      :  ieVer &lt;= 8
+            //      x-ie9p      : IE9+      :  9 &lt;= ieVer
+            //      x-ie78      : IE7 or 8  :  7 &lt;= ieVer &lt;= 8
+            //
+            if (Ext.isIE6) {
+                add('ie6');
+            } else { // ignore pre-IE6 :)
+                add('ie7p');
+
+                if (Ext.isIE7) {
+                    add('ie7');
+                } else {
+                    add('ie8p');
+
+                    if (Ext.isIE8) {
+                        add('ie8');
+                    } else {
+                        add('ie9p');
+
+                        if (Ext.isIE9) {
+                            add('ie9');
+                        }
+                    }
                 }
-                E.stopPropagation(me.browserEvent);
-            }
-        },
-
-        <div id="method-Ext.EventObject-getCharCode"></div>/**
-         * Gets the character code for the event.
-         * @return {Number}
-         */
-        getCharCode : function(){
-            return this.charCode || this.keyCode;
-        },
-
-        <div id="method-Ext.EventObject-getKey"></div>/**
-         * Returns a normalized keyCode for the event.
-         * @return {Number} The key code
-         */
-        getKey : function(){
-            return this.normalizeKey(this.keyCode || this.charCode)
-        },
-        
-        // private
-        normalizeKey: function(k){
-            return Ext.isSafari ? (safariKeys[k] || k) : k; 
-        },
-
-        <div id="method-Ext.EventObject-getPageX"></div>/**
-         * Gets the x coordinate of the event.
-         * @return {Number}
-         */
-        getPageX : function(){
-            return this.xy[0];
-        },
-
-        <div id="method-Ext.EventObject-getPageY"></div>/**
-         * Gets the y coordinate of the event.
-         * @return {Number}
-         */
-        getPageY : function(){
-            return this.xy[1];
-        },
-
-        <div id="method-Ext.EventObject-getXY"></div>/**
-         * Gets the page coordinates of the event.
-         * @return {Array} The xy values like [x, y]
-         */
-        getXY : function(){
-            return this.xy;
-        },
-
-        <div id="method-Ext.EventObject-getTarget"></div>/**
-         * Gets the target for the event.
-         * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
-         * @param {Number/Mixed} maxDepth (optional) The max depth to
-                search as a number or element (defaults to 10 || document.body)
-         * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
-         * @return {HTMLelement}
-         */
-        getTarget : function(selector, maxDepth, returnEl){
-            return selector ? Ext.fly(this.target).findParent(selector, maxDepth, returnEl) : (returnEl ? Ext.get(this.target) : this.target);
-        },
-
-        <div id="method-Ext.EventObject-getRelatedTarget"></div>/**
-         * Gets the related target.
-         * @return {HTMLElement}
-         */
-        getRelatedTarget : function(){
-            return this.browserEvent ? E.getRelatedTarget(this.browserEvent) : null;
-        },
-
-        <div id="method-Ext.EventObject-getWheelDelta"></div>/**
-         * Normalizes mouse wheel delta across browsers
-         * @return {Number} The delta
-         */
-        getWheelDelta : function(){
-            var e = this.browserEvent;
-            var delta = 0;
-            if(e.wheelDelta){ /* IE/Opera. */
-                delta = e.wheelDelta/120;
-            }else if(e.detail){ /* Mozilla case. */
-                delta = -e.detail/3;
-            }
-            return delta;
-        },
-        
-        <div id="method-Ext.EventObject-within"></div>/**
-        * Returns true if the target of this event is a child of el.  Unless the allowEl parameter is set, it will return false if if the target is el.
-        * Example usage:<pre><code>
-        // Handle click on any child of an element
-        Ext.getBody().on('click', function(e){
-            if(e.within('some-el')){
-                alert('Clicked on a child of some-el!');
             }
-        });
-        
-        // Handle click directly on an element, ignoring clicks on child nodes
-        Ext.getBody().on('click', function(e,t){
-            if((t.id == 'some-el') && !e.within(t, true)){
-                alert('Clicked directly on some-el!');
+
+            if (Ext.isIE6 || Ext.isIE7) {
+                add('ie7m');
             }
-        });
-        </code></pre>
-         * @param {Mixed} el The id, DOM element or Ext.Element to check
-         * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
-         * @param {Boolean} allowEl {optional} true to also check if the passed element is the target or related target
-         * @return {Boolean}
-         */
-        within : function(el, related, allowEl){
-            if(el){
-                var t = this[related ? "getRelatedTarget" : "getTarget"]();
-                return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t));
+            if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8) {
+                add('ie8m');
+            }
+            if (Ext.isIE7 || Ext.isIE8) {
+                add('ie78');
+            }
+        }
+        if (Ext.isGecko) {
+            add('gecko');
+            if (Ext.isGecko3) {
+                add('gecko3');
+            }
+            if (Ext.isGecko4) {
+                add('gecko4');
+            }
+            if (Ext.isGecko5) {
+                add('gecko5');
+            }
+        }
+        if (Ext.isOpera) {
+            add('opera');
+        }
+        if (Ext.isWebKit) {
+            add('webkit');
+        }
+        if (Ext.isSafari) {
+            add('safari');
+            if (Ext.isSafari2) {
+                add('safari2');
+            }
+            if (Ext.isSafari3) {
+                add('safari3');
+            }
+            if (Ext.isSafari4) {
+                add('safari4');
+            }
+            if (Ext.isSafari5) {
+                add('safari5');
             }
-            return false;
         }
-     };
+        if (Ext.isChrome) {
+            add('chrome');
+        }
+        if (Ext.isMac) {
+            add('mac');
+        }
+        if (Ext.isLinux) {
+            add('linux');
+        }
+        if (!Ext.supports.CSS3BorderRadius) {
+            add('nbr');
+        }
+        if (!Ext.supports.CSS3LinearGradient) {
+            add('nlg');
+        }
+        if (!Ext.scopeResetCSS) {
+            add('reset');
+        }
+
+        // add to the parent to allow for selectors x-strict x-border-box, also set the isBorderBox property correctly
+        if (html) {
+            if (Ext.isStrict &amp;&amp; (Ext.isIE6 || Ext.isIE7)) {
+                Ext.isBorderBox = false;
+            }
+            else {
+                Ext.isBorderBox = true;
+            }
+
+            htmlCls.push(baseCSSPrefix + (Ext.isBorderBox ? 'border-box' : 'strict'));
+            if (!Ext.isStrict) {
+                htmlCls.push(baseCSSPrefix + 'quirks');
+            }
+            Ext.fly(html, '_internal').addCls(htmlCls);
+        }
 
-    return new Ext.EventObjectImpl();
-}();</pre>
+        Ext.fly(bd, '_internal').addCls(cls);
+        return true;
+    };
+
+    Ext.onReady(initExtCss);
+})();
+</pre>
 </body>
-</html>
\ No newline at end of file
+</html>