extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/core/examples/index.js

@@ -0,0 +1,6 @@
+/* 
+ * To change this template, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/CTO.js

@@ -0,0 +1,25 @@
+Ext.define('Sample.CTO', {
+    extend: 'Sample.Developer',
+
+    statics: {
+        averageIQ: 140
+    },
+
+    constructor: function(config) {
+        this.callParent(arguments);
+
+        this.isSuperGeek = true;
+    },
+
+    hireNewDeveloperLike: function(developer) {
+        return developer.clone();
+    },
+
+    clone: function() {
+        var self = this.statics(),
+            cloned = new self(this.config);
+
+        alert(Ext.getClassName(this.callParent()));
+        return cloned;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/CoolGuy.js

@@ -0,0 +1,20 @@
+Ext.define('Sample.CoolGuy', {
+    extend: 'Sample.Person',
+
+    mixins: {
+        guitar: 'Sample.ability.CanPlayGuitar',
+        sing: 'Sample.ability.CanSing'
+    },
+
+    constructor: function() {
+        this.config.knownSongs.push("Love Me or Die");
+
+        return this.callParent(arguments);
+    },
+
+    sing: function() {
+        alert("Ahem...");
+
+        return this.mixins.sing.sing.apply(this, arguments);
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/Developer.js

@@ -0,0 +1,43 @@
+Ext.define('Sample.Developer', {
+    extend: 'Sample.Person',
+
+    statics: {
+        averageIQ: 120
+    },
+
+    config: {
+        languages: ['JavaScript', 'C++', 'Python']
+    },
+
+    constructor: function(config) {
+        this.isGeek = true;
+
+        // Apply a method from the parent class' prototype
+        return this.callParent(arguments);
+    },
+
+    canCode: function(language) {
+        return Ext.Array.contains(this.getLanguages(), language);
+    },
+
+    code: function(language) {
+        if (!this.canCode(language)) {
+            alert("I can't code in: " + language);
+
+            return this;
+        }
+
+        alert("I'm coding in: " + language);
+
+        this.eat("Bugs");
+
+        return this;
+    },
+
+    clone: function() {
+        var self = this.statics(),
+            cloned = new self(this.config);
+
+        return cloned;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/Gun.js

@@ -0,0 +1,3 @@
+Ext.define('Sample.Gun', {
+    
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/HumanResource.js

@@ -0,0 +1,23 @@
+Ext.define('Sample.HumanResource', {
+
+    requires: 'Sample.Developer',
+
+    singleton: true,
+
+    developers: [],
+
+    recruit: function(developer) {
+        if (!developer.canCode('JavaScript')) {
+            alert(developer.getName() + " doesn't know JavaScript, no point recruiting!");
+        }
+        else {
+            this.developers.push(developer);
+        }
+
+        return this;
+    },
+
+    getDevelopersCount: function() {
+        return this.developers.length;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/Musician.js

@@ -0,0 +1,20 @@
+Ext.define('Sample.Musician', {
+    extend: 'Sample.Person',
+
+    statics: {
+        clone: function(musician) {
+            return new this({
+                name: musician.getName(),
+                height: musician.getHeight(),
+                isCool: musician.getIsCool(),
+                gender: musician.getGender()
+            });
+        }
+    },
+
+    mixins: {
+        guitar: 'Sample.ability.CanPlayGuitar',
+        compose: 'Sample.ability.CanComposeSongs',
+        sing: 'Sample.ability.CanSing'
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/Person.js

@@ -0,0 +1,50 @@
+Ext.define('Sample.Person', {
+    uses: 'Sample.Gun',
+
+    statics: {
+        averageIQ: 100
+    },
+
+    config: {
+        name: 'Unknown',
+        gender: 'unknown',
+        isCool: false,
+        height: 5.8
+    },
+
+    constructor: function(config) {
+        this.initConfig(config);
+
+        return this;
+    },
+
+    eat: function(foodType) {
+        alert("I'm eating: " + foodType);
+
+        return this;
+    },
+
+    applyScroller: function(scroller) {
+        return new Ext.util.Scroller(scroller);
+    },
+
+    applyHeight: function(height) {
+        return parseFloat(height);
+    },
+
+    applyName: function(name) {
+        return name || 'Unknown';
+    },
+
+    applyGender: function(gender) {
+        if (!/^(male|female|gay|lesbian)$/.test(gender)) {
+            return 'unknown';
+        }
+
+        return gender;
+    },
+
+    getAverageIQ: function() {
+        return this.self.averageIQ;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/ability/CanComposeSongs.js

@@ -0,0 +1,9 @@
+Ext.define('Sample.ability.CanComposeSongs', {
+    canComposeSongs: true,
+
+    composeSongs: function() {
+        alert(this.getName() + " is composing songs");
+
+        return this;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/ability/CanPlayGuitar.js

@@ -0,0 +1,9 @@
+Ext.define('Sample.ability.CanPlayGuitar', {
+    canPlayGuitar: true,
+
+    playGuitar: function() {
+        alert(this.getName() + " is playing guitar");
+
+        return this;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/ability/CanSing.js

@@ -0,0 +1,18 @@
+Ext.define('Sample.ability.CanSing', {
+    config: {
+        knownSongs: ['Yesterday', 'Happy New Year', 'Jingle Bells']
+    },
+
+    canSing: true,
+
+    sing: function(songName) {
+        if (!Ext.Array.contains(this.getKnownSongs(), songName)) {
+            alert("Sorry! I can't sing " + songName);
+        }
+        else {
+            alert("I'm singing " + songName);
+        }
+
+        return this;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/deadlock/A.js

@@ -0,0 +1,3 @@
+Ext.define('Sample.deadlock.A', {
+    extend: 'Sample.deadlock.B'
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/deadlock/B.js

@@ -0,0 +1,3 @@
+Ext.define('Sample.deadlock.B', {
+    extend: 'Sample.deadlock.C'
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/deadlock/C.js

@@ -0,0 +1,3 @@
+Ext.define('Sample.deadlock.C', {
+    extend: 'Sample.deadlock.D'
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/deadlock/D.js

@@ -0,0 +1,3 @@
+Ext.define('Sample.deadlock.D', {
+    extend: 'Sample.deadlock.E'
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/deadlock/E.js

@@ -0,0 +1,3 @@
+Ext.define('Sample.deadlock.E', {
+    extend: 'Sample.deadlock.A'
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/notdeadlock/A.js

@@ -0,0 +1,3 @@
+Ext.define('Sample.notdeadlock.A', {
+    extend: 'Sample.notdeadlock.B'
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/notdeadlock/B.js

@@ -0,0 +1,4 @@
+Ext.define('Sample.notdeadlock.B', {
+    extend: 'Sample.notdeadlock.C',
+    uses: 'Sample.notdeadlock.A'
+});

data/app/assets/javascripts/extjs-rails/src/core/examples/src/Sample/notdeadlock/C.js

@@ -0,0 +1,3 @@
+Ext.define('Sample.notdeadlock.C', {
+    uses: 'Sample.notdeadlock.A'
+});

data/app/assets/javascripts/extjs-rails/src/core/src/EventManager.js

@@ -0,0 +1,1167 @@
+/**
+ * @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 = new function() {
+    var EventManager = this,
+        doc = document,
+        win = window,
+        initExtCss = function() {
+            // find the body element
+            var bd = doc.body || doc.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 "IE7+" or "IE6 or 7". To help
+                // reduce the clutter (since CSS/SCSS cannot do these tests), we add some
+                // additional classes:
+                //
+                //      x-ie7p      : IE7+      :  7 <= ieVer
+                //      x-ie7m      : IE7-      :  ieVer <= 7
+                //      x-ie8p      : IE8+      :  8 <= ieVer
+                //      x-ie8m      : IE8-      :  ieVer <= 8
+                //      x-ie9p      : IE9+      :  9 <= ieVer
+                //      x-ie78      : IE7 or 8  :  7 <= ieVer <= 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');
+                            }
+                        }
+                    }
+                }
+
+                if (Ext.isIE6 || Ext.isIE7) {
+                    add('ie7m');
+                }
+                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');
+                }
+                if (Ext.isSafari5_0) {
+                    add('safari5_0')
+                }
+            }
+            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 && (Ext.isIE6 || Ext.isIE7)) {
+                    Ext.isBorderBox = false;
+                }
+                else {
+                    Ext.isBorderBox = true;
+                }
+
+                if(Ext.isBorderBox) {
+                    htmlCls.push(baseCSSPrefix + 'border-box');
+                }
+                if (Ext.isStrict) {
+                    htmlCls.push(baseCSSPrefix + 'strict');
+                } else {
+                    htmlCls.push(baseCSSPrefix + 'quirks');
+                }
+                Ext.fly(html, '_internal').addCls(htmlCls);
+            }
+
+            Ext.fly(bd, '_internal').addCls(cls);
+            return true;
+        };
+
+    Ext.apply(EventManager, {
+        /**
+         * Check if we have bound our global onReady listener
+         * @private
+         */
+        hasBoundOnReady: false,
+
+        /**
+         * Check if fireDocReady has been called
+         * @private
+         */
+        hasFiredReady: false,
+
+        /**
+         * Additionally, allow the 'DOM' listener thread to complete (usually desirable with mobWebkit, Gecko)
+         * before firing the entire onReady chain (high stack load on Loader) by specifying a delay value
+         * @default 1ms
+         * @private
+         */
+        deferReadyEvent : 1,
+
+        /*
+         * diags: a list of event names passed to onReadyEvent (in chron order)
+         * @private
+         */
+        onReadyChain : [],
+
+        /**
+         * Holds references to any onReady functions
+         * @private
+         */
+        readyEvent:
+            (function () {
+                var event = new Ext.util.Event();
+                event.fire = function () {
+                    Ext._beforeReadyTime = Ext._beforeReadyTime || new Date().getTime();
+                    event.self.prototype.fire.apply(event, arguments);
+                    Ext._afterReadytime = new Date().getTime();
+                };
+                return event;
+            }()),
+
+        /**
+         * Fires when a DOM event handler finishes its run, just before returning to browser control.
+         * This can be useful for performing cleanup, or upfdate tasks which need to happen only
+         * after all code in an event handler has been run, but which should not be executed in a timer
+         * due to the intervening browser reflow/repaint which would take place.
+         *
+         */
+        idleEvent: new Ext.util.Event(),
+
+        /**
+         * detects whether the EventManager has been placed in a paused state for synchronization
+         * with external debugging / perf tools (PageAnalyzer)
+         * @private
+         */
+        isReadyPaused: function(){
+            return (/[?&]ext-pauseReadyFire\b/i.test(location.search) && !Ext._continueFireReady);
+        },
+
+        /**
+         * Binds the appropriate browser event for checking if the DOM has loaded.
+         * @private
+         */
+        bindReadyEvent: function() {
+            if (EventManager.hasBoundOnReady) {
+                return;
+            }
+
+            // Test scenario where Core is dynamically loaded AFTER window.load
+            if ( doc.readyState == 'complete'  ) {  // Firefox4+ got support for this state, others already do.
+                EventManager.onReadyEvent({
+                    type: doc.readyState || 'body'
+                });
+            } else {
+                document.addEventListener('DOMContentLoaded', EventManager.onReadyEvent, false);
+                window.addEventListener('load', EventManager.onReadyEvent, false);
+                EventManager.hasBoundOnReady = true;
+            }
+        },
+
+        onReadyEvent : function(e) {
+            if (e && e.type) {
+                EventManager.onReadyChain.push(e.type);
+            }
+
+            if (EventManager.hasBoundOnReady) {
+                document.removeEventListener('DOMContentLoaded', EventManager.onReadyEvent, false);
+                window.removeEventListener('load', EventManager.onReadyEvent, false);
+            }
+
+            if (!Ext.isReady) {
+                EventManager.fireDocReady();
+            }
+        },
+
+        /**
+         * We know the document is loaded, so trigger any onReady events.
+         * @private
+         */
+        fireDocReady: function() {
+            if (!Ext.isReady) {
+                Ext._readyTime = new Date().getTime();
+                Ext.isReady = true;
+
+                Ext.supports.init();
+                EventManager.onWindowUnload();
+                EventManager.readyEvent.onReadyChain = EventManager.onReadyChain;    //diags report
+
+                if (Ext.isNumber(EventManager.deferReadyEvent)) {
+                    Ext.Function.defer(EventManager.fireReadyEvent, EventManager.deferReadyEvent);
+                    EventManager.hasDocReadyTimer = true;
+                } else {
+                    EventManager.fireReadyEvent();
+                }
+            }
+        },
+
+        /**
+         * Fires the ready event
+         * @private
+         */
+        fireReadyEvent: function(){
+            var readyEvent = EventManager.readyEvent;
+
+            // Unset the timer flag here since other onReady events may be
+            // added during the fire() call and we don't want to block them
+            EventManager.hasDocReadyTimer = false;
+            EventManager.isFiring = true;
+
+            // Ready events are all single: true, if we get to the end
+            // & there are more listeners, it means they were added
+            // inside some other ready event
+            while (readyEvent.listeners.length && !EventManager.isReadyPaused()) {
+                readyEvent.fire();
+            }
+            EventManager.isFiring = false;
+            EventManager.hasFiredReady = true;
+        },
+
+        /**
+         * 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}.
+         */
+        onDocumentReady: function(fn, scope, options) {
+            options = options || {};
+            // force single, only ever fire it once
+            options.single = true;
+            EventManager.readyEvent.addListener(fn, scope, options);
+
+            // If we're in the middle of firing, or we have a deferred timer
+            // pending, drop out since the event will be fired  later
+            if (!(EventManager.isFiring || EventManager.hasDocReadyTimer)) {
+                if (Ext.isReady) {
+                    EventManager.fireReadyEvent();
+                } else {
+                    EventManager.bindReadyEvent();
+                }
+            }
+        },
+
+        // --------------------- event binding ---------------------
+
+        /**
+         * 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(),
+
+        /**
+         * Options to parse for the 4th argument to addListener.
+         * @private
+         */
+        propRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate|freezeEvent)$/,
+
+        /**
+         * 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 id;
+
+            element = Ext.getDom(element);
+
+            if (element === doc || element === win) {
+                id = element === doc ? Ext.documentId : Ext.windowId;
+            }
+            else {
+                id = Ext.id(element);
+            }
+
+            if (!Ext.cache[id]) {
+                Ext.addCacheEntry(id, null, element);
+            }
+
+            return id;
+        },
+
+        /**
+         * Convert a "config style" 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 propRe = EventManager.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 (typeof value == 'function') {
+                            // 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];
+                        }
+
+                        if (isRemove) {
+                            EventManager.removeListener.apply(EventManager, args);
+                        } else {
+                            EventManager.addListener.apply(EventManager, args);
+                        }
+                    }
+                }
+            }
+        },
+
+        mouseEnterLeaveRe: /mouseenter|mouseleave/,
+
+        /**
+         * 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 (EventManager.mouseEnterLeaveRe.test(eventName) && !Ext.supports.MouseEnterLeave) {
+                if (fn) {
+                    fn = Ext.Function.createInterceptor(fn, EventManager.contains);
+                }
+                eventName = eventName == 'mouseenter' ? 'mouseover' : 'mouseout';
+            } else if (eventName == 'mousewheel' && !Ext.supports.MouseWheel && !Ext.isOpera) {
+                eventName = 'DOMMouseScroll';
+            }
+            return {
+                eventName: eventName,
+                fn: fn
+            };
+        },
+
+        /**
+         * Checks whether the event's relatedTarget is contained inside (or <b>is</b>) the element.
+         * @private
+         * @param {Object} event
+         */
+        contains: function(event) {
+            var parent = event.browserEvent.currentTarget,
+                child = EventManager.getRelatedTarget(event);
+
+            if (parent && parent.firstChild) {
+                while (child) {
+                    if (child === parent) {
+                        return false;
+                    }
+                    child = child.parentNode;
+                    if (child && (child.nodeType != 1)) {
+                        child = null;
+                    }
+                }
+            }
+            return true;
+        },
+
+        /**
+        * 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) {
+            // Check if we've been passed a "config style" event.
+            if (typeof eventName !== 'string') {
+                EventManager.prepareListenerConfig(element, eventName);
+                return;
+            }
+
+            var dom = element.dom || Ext.getDom(element),
+                bind, wrap;
+
+            //<debug>
+            if (!fn) {
+                Ext.Error.raise({
+                    sourceClass: 'Ext.EventManager',
+                    sourceMethod: 'addListener',
+                    targetElement: element,
+                    eventName: eventName,
+                    msg: 'Error adding "' + eventName + '\" listener. The handler function is undefined.'
+                });
+            }
+            //</debug>
+
+            // create the wrapper function
+            options = options || {};
+
+            bind = EventManager.normalizeEvent(eventName, fn);
+            wrap = EventManager.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 == doc && eventName == 'mousedown') {
+                EventManager.stoppedMouseDownEvent.addListener(wrap);
+            }
+
+            // add all required data into the event cache
+            EventManager.getEventListenerCache(element.dom ? element : dom, eventName).push({
+                fn: fn,
+                wrap: wrap,
+                scope: scope
+            });
+        },
+
+        /**
+        * 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) {
+            // handle our listener config object syntax
+            if (typeof eventName !== 'string') {
+                EventManager.prepareListenerConfig(element, eventName, true);
+                return;
+            }
+
+            var dom = Ext.getDom(element),
+                el = element.dom ? element : Ext.get(dom),
+                cache = EventManager.getEventListenerCache(el, eventName),
+                bindName = EventManager.normalizeEvent(eventName).eventName,
+                i = cache.length, j,
+                listener, wrap, tasks;
+
+
+            while (i--) {
+                listener = cache[i];
+
+                if (listener && (!fn || listener.fn == fn) && (!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 && 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 && dom == doc && eventName == 'mousedown') {
+                        EventManager.stoppedMouseDownEvent.removeListener(wrap);
+                    }
+
+                    // remove listener from cache
+                    Ext.Array.erase(cache, i, 1);
+                }
+            }
+        },
+
+        /**
+        * 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 el = element.dom ? element : Ext.get(element),
+                cache, events, eventName;
+
+            if (!el) {
+                return;
+            }
+            cache = (el.$cache || el.getCache());
+            events = cache.events;
+
+            for (eventName in events) {
+                if (events.hasOwnProperty(eventName)) {
+                    EventManager.removeListener(el, eventName);
+                }
+            }
+            cache.events = {};
+        },
+
+        /**
+         * 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) {
+                EventManager.removeListener(element, eventName);
+            }
+            else {
+                EventManager.removeAll(element);
+            }
+
+            if (dom && dom.childNodes) {
+                for (len = element.childNodes.length; i < len; i++) {
+                    EventManager.purgeElement(element.childNodes[i], eventName);
+                }
+            }
+        },
+
+        /**
+         * 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 f, gen, escapeRx = /\\/g, wrap = function(e, args) {
+                // Compile the implementation upon first firing
+                if (!gen) {
+                    f = ['if(!' + Ext.name + ') {return;}'];
+
+                    if(options.buffer || options.delay || options.freezeEvent) {
+                        f.push('e = new X.EventObjectImpl(e, ' + (options.freezeEvent ? 'true' : 'false' ) + ');');
+                    } else {
+                        f.push('e = X.EventObject.setEvent(e);');
+                    }
+
+                    if (options.delegate) {
+                        // double up '\' characters so escape sequences survive the
+                        // string-literal translation
+                        f.push('var t = e.getTarget("' + (options.delegate + '').replace(escapeRx, '\\\\') + '", 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();');
+                        }
+                    }
+
+                    if(options.normalized === false) {
+                        f.push('e = e.browserEvent;');
+                    }
+
+                    if(options.buffer) {
+                        f.push('(wrap.task && clearTimeout(wrap.task));');
+                        f.push('wrap.task = setTimeout(function() {');
+                    }
+
+                    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('evtMgr.removeListener(dom, ename, fn, scope);');
+                    }
+
+                    // Fire the global idle event for all events except mousemove which is too common, and
+                    // fires too frequently and fast to be use in tiggering onIdle processing.
+                    if (ename !== 'mousemove') {
+                        f.push('if (evtMgr.idleEvent.listeners.length) {');
+                        f.push('evtMgr.idleEvent.fire();');
+                        f.push('}');
+                    }
+
+                    if(options.delay) {
+                        f.push('}, ' + options.delay + '));');
+                    }
+
+                    if(options.buffer) {
+                        f.push('}, ' + options.buffer + ');');
+                    }
+
+                    gen = Ext.cacheableFunctionFactory('e', 'options', 'fn', 'scope', 'ename', 'dom', 'wrap', 'args', 'X', 'evtMgr', f.join('\n'));
+                }
+
+                gen.call(dom, e, options, fn, scope, ename, dom, wrap, args, Ext, EventManager);
+            };
+            return wrap;
+        },
+
+        /**
+         * 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) {
+            var elementCache, eventCache;
+            if (!element) {
+                return [];
+            }
+
+            if (element.$cache) {
+                elementCache = element.$cache;
+            } else {
+                // getId will populate the cache for this element if it isn't already present
+                elementCache = Ext.cache[EventManager.getId(element)];
+            }
+            eventCache = elementCache.events || (elementCache.events = {});
+
+            return eventCache[eventName] || (eventCache[eventName] = []);
+        },
+
+        // --------------------- utility methods ---------------------
+        mouseLeaveRe: /(mouseout|mouseleave)/,
+        mouseEnterRe: /(mouseover|mouseenter)/,
+
+        /**
+         * Stop the event (preventDefault and stopPropagation)
+         * @param {Event} The event to stop
+         */
+        stopEvent: function(event) {
+            EventManager.stopPropagation(event);
+            EventManager.preventDefault(event);
+        },
+
+        /**
+         * 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;
+            }
+        },
+
+        /**
+         * 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 -> F12
+                  if (event.ctrlKey || event.keyCode > 111 && event.keyCode < 124) {
+                      event.keyCode = -1;
+                  }
+                } catch (e) {
+                    // see this outdated document http://support.microsoft.com/kb/934364/en-us for more info
+                }
+            }
+        },
+
+        /**
+         * 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 (EventManager.mouseLeaveRe.test(event.type)) {
+                    target = event.toElement;
+                } else if (EventManager.mouseEnterRe.test(event.type)) {
+                    target = event.fromElement;
+                }
+            }
+            return EventManager.resolveTextNode(target);
+        },
+
+        /**
+         * Gets the x coordinate from the event
+         * @param {Object} event The event
+         * @return {Number} The x coordinate
+         */
+        getPageX: function(event) {
+            return EventManager.getPageXY(event)[0];
+        },
+
+        /**
+         * Gets the y coordinate from the event
+         * @param {Object} event The event
+         * @return {Number} The y coordinate
+         */
+        getPageY: function(event) {
+            return EventManager.getPageXY(event)[1];
+        },
+
+        /**
+         * Gets the x & 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,
+                docEl = doc.documentElement,
+                body = doc.body;
+
+            // pageX/pageY not available (undefined, not null), use clientX/clientY instead
+            if (!x && x !== 0) {
+                x = event.clientX + (docEl && docEl.scrollLeft || body && body.scrollLeft || 0) - (docEl && docEl.clientLeft || body && body.clientLeft || 0);
+                y = event.clientY + (docEl && docEl.scrollTop  || body && body.scrollTop  || 0) - (docEl && docEl.clientTop  || body && body.clientTop  || 0);
+            }
+            return [x, y];
+        },
+
+        /**
+         * Gets the target of the event.
+         * @param {Object} event The event
+         * @return {HTMLElement} target
+         */
+        getTarget: function(event) {
+            event = event.browserEvent || event;
+            return EventManager.resolveTextNode(event.target || event.srcElement);
+        },
+
+        // 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.
+        /**
+         * Resolve any text nodes accounting for browser differences.
+         * @private
+         * @param {HTMLElement} node The node
+         * @return {HTMLElement} The resolved node
+         */
+        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 && node.nodeType == 3 ? node.parentNode: node;
+                },
+
+        // --------------------- custom event binding ---------------------
+
+        // Keep track of the current width/height
+        curWidth: 0,
+        curHeight: 0,
+
+        /**
+         * 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 (<code>this</code> 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 = EventManager.resizeEvent;
+
+            if (!resize) {
+                EventManager.resizeEvent = resize = new Ext.util.Event();
+                EventManager.on(win, 'resize', EventManager.fireResize, null, {buffer: 100});
+            }
+            resize.addListener(fn, scope, options);
+        },
+
+        /**
+         * Fire the resize event.
+         * @private
+         */
+        fireResize: function() {
+            var 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 (EventManager.curHeight != h || EventManager.curWidth != w) {
+                 EventManager.curHeight = h;
+                 EventManager.curWidth = w;
+                 EventManager.resizeEvent.fire(w, h);
+             }
+        },
+
+        /**
+         * 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) {
+            var resize = EventManager.resizeEvent;
+            if (resize) {
+                resize.removeListener(fn, scope);
+            }
+        },
+
+        /**
+         * Adds a listener to be notified when the browser window is unloaded.
+         * @param {Function} fn      The handler function the window unload event invokes.
+         * @param {Object}   scope   The scope (<code>this</code> reference) in which the handler function executes. Defaults to the browser window.
+         * @param {Boolean}  options Options object as passed to {@link Ext.Element#addListener}
+         */
+        onWindowUnload: function(fn, scope, options) {
+            var unload = EventManager.unloadEvent;
+
+            if (!unload) {
+                EventManager.unloadEvent = unload = new Ext.util.Event();
+                EventManager.addListener(win, 'unload', EventManager.fireUnload);
+            }
+            if (fn) {
+                unload.addListener(fn, scope, options);
+            }
+        },
+
+        /**
+         * Fires the unload event for items bound with onWindowUnload
+         * @private
+         */
+        fireUnload: function() {
+            // wrap in a try catch, could have some problems during unload
+            try {
+                // relinquish references.
+                doc = win = undefined;
+
+                var gridviews, i, ln,
+                    el, cache;
+
+                EventManager.unloadEvent.fire();
+                // Work around FF3 remembering the last scroll position when refreshing the grid and then losing grid view
+                if (Ext.isGecko3) {
+                    gridviews = Ext.ComponentQuery.query('gridview');
+                    i = 0;
+                    ln = gridviews.length;
+                    for (; i < ln; i++) {
+                        gridviews[i].scrollToTop();
+                    }
+                }
+                // Purge all elements in the cache
+                cache = Ext.cache;
+
+                for (el in cache) {
+                    if (cache.hasOwnProperty(el)) {
+                        EventManager.removeAll(el);
+                    }
+                }
+            } catch(e) {
+            }
+        },
+
+        /**
+         * Removes the passed window unload listener.
+         * @param {Function} fn        The method the event invokes
+         * @param {Object}   scope    The scope of handler
+         */
+        removeUnloadListener: function(fn, scope) {
+            var unload = EventManager.unloadEvent;
+            if (unload) {
+                unload.removeListener(fn, scope);
+            }
+        },
+
+        /**
+         * note 1: IE fires ONLY the keydown event on specialkey autorepeat
+         * note 2: Safari < 3.1, Gecko (Mac/Linux) & 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) >= 525 :
+                       !((Ext.isGecko && !Ext.isWindows) || Ext.isOpera),
+
+        /**
+         * Indicates which event to use for getting key presses.
+         * @return {String} The appropriate event name.
+         */
+        getKeyEvent: function() {
+            return EventManager.useKeyDown ? 'keydown' : 'keypress';
+        }
+    });
+
+    // route "< ie9-Standards" to a legacy IE onReady implementation
+    if(!('addEventListener' in document) && document.attachEvent) {
+        Ext.apply( EventManager, {
+            /* Customized implementation for Legacy IE.  The default implementation is configured for use
+             *  with all other 'standards compliant' agents.
+             *  References: http://javascript.nwbox.com/IEContentLoaded/
+             *  licensed courtesy of http://developer.yahoo.com/yui/license.html
+             */
+
+            /**
+             * This strategy has minimal benefits for Sencha solutions that build themselves (ie. minimal initial page markup).
+             * However, progressively-enhanced pages (with image content and/or embedded frames) will benefit the most from it.
+             * Browser timer resolution is too poor to ensure a doScroll check more than once on a page loaded with minimal
+             * assets (the readystatechange event 'complete' usually beats the doScroll timer on a 'lightly-loaded' initial document).
+             */
+            pollScroll : function() {
+                var scrollable = true;
+
+                try {
+                    document.documentElement.doScroll('left');
+                } catch(e) {
+                    scrollable = false;
+                }
+
+                if (scrollable) {
+                    EventManager.onReadyEvent({
+                        type:'doScroll'
+                    });
+                } else {
+                    /*
+                     * minimize thrashing --
+                     * adjusted for setTimeout's close-to-minimums (not too low),
+                     * as this method SHOULD always be called once initially
+                     */
+                    EventManager.scrollTimeout = setTimeout(EventManager.pollScroll, 20);
+                }
+
+                return scrollable;
+            },
+
+            /**
+             * Timer for doScroll polling
+             * @private
+             */
+            scrollTimeout: null,
+
+            /* @private
+             */
+            readyStatesRe  : /complete/i,
+
+            /* @private
+             */
+            checkReadyState: function() {
+                var state = document.readyState;
+
+                if (EventManager.readyStatesRe.test(state)) {
+                    EventManager.onReadyEvent({
+                        type: state
+                    });
+                }
+            },
+
+            bindReadyEvent: function() {
+                var topContext = true;
+
+                if (EventManager.hasBoundOnReady) {
+                    return;
+                }
+
+                //are we in an IFRAME? (doScroll ineffective here)
+                try {
+                    topContext = !window.frameElement;
+                } catch(e) {
+                }
+
+                if (!topContext || !doc.documentElement.doScroll) {
+                    EventManager.pollScroll = Ext.emptyFn;   //then noop this test altogether
+                }
+
+                // starts doScroll polling if necessary
+                if (EventManager.pollScroll() === true) {
+                    return;
+                }
+
+                // Core is loaded AFTER initial document write/load ?
+                if (doc.readyState == 'complete' )  {
+                    EventManager.onReadyEvent({type: 'already ' + (doc.readyState || 'body') });
+                } else {
+                    doc.attachEvent('onreadystatechange', EventManager.checkReadyState);
+                    window.attachEvent('onload', EventManager.onReadyEvent);
+                    EventManager.hasBoundOnReady = true;
+                }
+            },
+
+            onReadyEvent : function(e) {
+                if (e && e.type) {
+                    EventManager.onReadyChain.push(e.type);
+                }
+
+                if (EventManager.hasBoundOnReady) {
+                    document.detachEvent('onreadystatechange', EventManager.checkReadyState);
+                    window.detachEvent('onload', EventManager.onReadyEvent);
+                }
+
+                if (Ext.isNumber(EventManager.scrollTimeout)) {
+                    clearTimeout(EventManager.scrollTimeout);
+                    delete EventManager.scrollTimeout;
+                }
+
+                if (!Ext.isReady) {
+                    EventManager.fireDocReady();
+                }
+            },
+
+            //diags: a list of event types passed to onReadyEvent (in chron order)
+            onReadyChain : []
+        });
+    }
+
+
+    /**
+     * 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);
+    };
+
+    /**
+     * Alias for {@link Ext.EventManager#onDocumentReady Ext.EventManager.onDocumentReady}
+     * @member Ext
+     * @method onDocumentReady
+     */
+    Ext.onDocumentReady = EventManager.onDocumentReady;
+
+    /**
+     * Alias for {@link Ext.EventManager#addListener Ext.EventManager.addListener}
+     * @member Ext.EventManager
+     * @method on
+     */
+    EventManager.on = EventManager.addListener;
+
+    /**
+     * Alias for {@link Ext.EventManager#removeListener Ext.EventManager.removeListener}
+     * @member Ext.EventManager
+     * @method un
+     */
+    EventManager.un = EventManager.removeListener;
+
+    Ext.onReady(initExtCss);
+};