extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,1423 @@
+/**
+ * @author Jacky Nguyen <jacky@sencha.com>
+ * @docauthor Jacky Nguyen <jacky@sencha.com>
+ * @class Ext.Loader
+ *
+ * Ext.Loader is the heart of the new dynamic dependency loading capability in Ext JS 4+. It is most commonly used
+ * via the {@link Ext#require} shorthand. Ext.Loader supports both asynchronous and synchronous loading
+ * approaches, and leverage their advantages for the best development flow. We'll discuss about the pros and cons of each approach:
+ *
+ * # Asynchronous Loading #
+ *
+ * - Advantages:
+ *     + Cross-domain
+ *     + No web server needed: you can run the application via the file system protocol (i.e: `file://path/to/your/index
+ *  .html`)
+ *     + Best possible debugging experience: error messages come with the exact file name and line number
+ *
+ * - Disadvantages:
+ *     + Dependencies need to be specified before-hand
+ *
+ * ### Method 1: Explicitly include what you need: ###
+ *
+ *     // Syntax
+ *     Ext.require({String/Array} expressions);
+ *
+ *     // Example: Single alias
+ *     Ext.require('widget.window');
+ *
+ *     // Example: Single class name
+ *     Ext.require('Ext.window.Window');
+ *
+ *     // Example: Multiple aliases / class names mix
+ *     Ext.require(['widget.window', 'layout.border', 'Ext.data.Connection']);
+ *
+ *     // Wildcards
+ *     Ext.require(['widget.*', 'layout.*', 'Ext.data.*']);
+ *
+ * ### Method 2: Explicitly exclude what you don't need: ###
+ *
+ *     // Syntax: Note that it must be in this chaining format.
+ *     Ext.exclude({String/Array} expressions)
+ *        .require({String/Array} expressions);
+ *
+ *     // Include everything except Ext.data.*
+ *     Ext.exclude('Ext.data.*').require('*');
+ *
+ *     // Include all widgets except widget.checkbox*,
+ *     // which will match widget.checkbox, widget.checkboxfield, widget.checkboxgroup, etc.
+ *     Ext.exclude('widget.checkbox*').require('widget.*');
+ *
+ * # Synchronous Loading on Demand #
+ *
+ * - Advantages:
+ *     + There's no need to specify dependencies before-hand, which is always the convenience of including ext-all.js
+ *  before
+ *
+ * - Disadvantages:
+ *     + Not as good debugging experience since file name won't be shown (except in Firebug at the moment)
+ *     + Must be from the same domain due to XHR restriction
+ *     + Need a web server, same reason as above
+ *
+ * There's one simple rule to follow: Instantiate everything with Ext.create instead of the `new` keyword
+ *
+ *     Ext.create('widget.window', { ... }); // Instead of new Ext.window.Window({...});
+ *
+ *     Ext.create('Ext.window.Window', {}); // Same as above, using full class name instead of alias
+ *
+ *     Ext.widget('window', {}); // Same as above, all you need is the traditional `xtype`
+ *
+ * Behind the scene, {@link Ext.ClassManager} will automatically check whether the given class name / alias has already
+ *  existed on the page. If it's not, Ext.Loader will immediately switch itself to synchronous mode and automatic load the given
+ *  class and all its dependencies.
+ *
+ * # Hybrid Loading - The Best of Both Worlds #
+ *
+ * It has all the advantages combined from asynchronous and synchronous loading. The development flow is simple:
+ *
+ * ### Step 1: Start writing your application using synchronous approach.
+ *
+ * Ext.Loader will automatically fetch all dependencies on demand as they're needed during run-time. For example:
+ *
+ *     Ext.onReady(function(){
+ *         var window = Ext.createWidget('window', {
+ *             width: 500,
+ *             height: 300,
+ *             layout: {
+ *                 type: 'border',
+ *                 padding: 5
+ *             },
+ *             title: 'Hello Dialog',
+ *             items: [{
+ *                 title: 'Navigation',
+ *                 collapsible: true,
+ *                 region: 'west',
+ *                 width: 200,
+ *                 html: 'Hello',
+ *                 split: true
+ *             }, {
+ *                 title: 'TabPanel',
+ *                 region: 'center'
+ *             }]
+ *         });
+ *
+ *         window.show();
+ *     })
+ *
+ * ### Step 2: Along the way, when you need better debugging ability, watch the console for warnings like these: ###
+ *
+ *     [Ext.Loader] Synchronously loading 'Ext.window.Window'; consider adding Ext.require('Ext.window.Window') before your application's code
+ *     ClassManager.js:432
+ *     [Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') before your application's code
+ *
+ * Simply copy and paste the suggested code above `Ext.onReady`, i.e:
+ *
+ *     Ext.require('Ext.window.Window');
+ *     Ext.require('Ext.layout.container.Border');
+ *
+ *     Ext.onReady(...);
+ *
+ * Everything should now load via asynchronous mode.
+ *
+ * # Deployment #
+ *
+ * It's important to note that dynamic loading should only be used during development on your local machines.
+ * During production, all dependencies should be combined into one single JavaScript file. Ext.Loader makes
+ * the whole process of transitioning from / to between development / maintenance and production as easy as
+ * possible. Internally {@link Ext.Loader#history Ext.Loader.history} maintains the list of all dependencies your application
+ * needs in the exact loading sequence. It's as simple as concatenating all files in this array into one,
+ * then include it on top of your application.
+ *
+ * This process will be automated with Sencha Command, to be released and documented towards Ext JS 4 Final.
+ *
+ * @singleton
+ */
+
+Ext.Loader = new function() {
+    var Loader = this,
+        Manager = Ext.ClassManager,
+        Class = Ext.Class,
+        flexSetter = Ext.Function.flexSetter,
+        alias = Ext.Function.alias,
+        pass = Ext.Function.pass,
+        defer = Ext.Function.defer,
+        arrayErase = Ext.Array.erase,
+        //<if nonBrowser>
+        isNonBrowser = typeof window == 'undefined',
+        isNodeJS = isNonBrowser && (typeof require == 'function'),
+        isJsdb = isNonBrowser && typeof system != 'undefined' && system.program.search(/jsdb/) !== -1,
+        isPhantomJS = (typeof phantom != 'undefined' && phantom.fs),
+        //</if>
+        dependencyProperties = ['extend', 'mixins', 'requires'],
+        isInHistory = {},
+        history = [],
+        slashDotSlashRe = /\/\.\//g,
+        dotRe = /\./g;
+
+    Ext.apply(Loader, {
+
+        /**
+         * @private
+         */
+        isInHistory: isInHistory,
+
+        /**
+         * An array of class names to keep track of the dependency loading order.
+         * This is not guaranteed to be the same everytime due to the asynchronous
+         * nature of the Loader.
+         *
+         * @property {Array} history
+         */
+        history: history,
+
+        /**
+         * Configuration
+         * @private
+         */
+        config: {
+            /**
+             * @cfg {Boolean} enabled
+             * Whether or not to enable the dynamic dependency loading feature.
+             */
+            enabled: false,
+
+            /**
+             * @cfg {Boolean} scriptChainDelay
+             * millisecond delay between asynchronous script injection (prevents stack overflow on some user agents)
+             * 'false' disables delay but potentially increases stack load.
+             */
+            scriptChainDelay : false,
+
+            /**
+             * @cfg {Boolean} disableCaching
+             * Appends current timestamp to script files to prevent caching.
+             */
+            disableCaching: true,
+
+            /**
+             * @cfg {String} disableCachingParam
+             * The get parameter name for the cache buster's timestamp.
+             */
+            disableCachingParam: '_dc',
+
+            /**
+             * @cfg {Boolean} garbageCollect
+             * True to prepare an asynchronous script tag for garbage collection (effective only
+             * if {@link #preserveScripts preserveScripts} is false)
+             */
+            garbageCollect : false,
+
+            /**
+             * @cfg {Object} paths
+             * The mapping from namespaces to file paths
+             *
+             *     {
+             *         'Ext': '.', // This is set by default, Ext.layout.container.Container will be
+             *                     // loaded from ./layout/Container.js
+             *
+             *         'My': './src/my_own_folder' // My.layout.Container will be loaded from
+             *                                     // ./src/my_own_folder/layout/Container.js
+             *     }
+             *
+             * Note that all relative paths are relative to the current HTML document.
+             * If not being specified, for example, <code>Other.awesome.Class</code>
+             * will simply be loaded from <code>./Other/awesome/Class.js</code>
+             */
+            paths: {
+                'Ext': '.'
+            },
+
+            /**
+             * @cfg {Boolean} preserveScripts
+             * False to remove and optionally {@link #garbageCollect garbage-collect} asynchronously loaded scripts,
+             * True to retain script element for browser debugger compatibility and improved load performance.
+             */
+            preserveScripts : true,
+
+            /**
+             * @cfg {String} scriptCharset
+             * Optional charset to specify encoding of dynamic script content.
+             */
+            scriptCharset : undefined
+        },
+
+        /**
+         * Set the configuration for the loader. This should be called right after ext-(debug).js
+         * is included in the page, and before Ext.onReady. i.e:
+         *
+         *     <script type="text/javascript" src="ext-core-debug.js"></script>
+         *     <script type="text/javascript">
+         *         Ext.Loader.setConfig({
+         *           enabled: true,
+         *           paths: {
+         *               'My': 'my_own_path'
+         *           }
+         *         });
+         *     </script>
+         *     <script type="text/javascript">
+         *         Ext.require(...);
+         *
+         *         Ext.onReady(function() {
+         *           // application code here
+         *         });
+         *     </script>
+         *
+         * Refer to config options of {@link Ext.Loader} for the list of possible properties
+         *
+         * @param {Object} config The config object to override the default values
+         * @return {Ext.Loader} this
+         */
+        setConfig: function(name, value) {
+            if (Ext.isObject(name) && arguments.length === 1) {
+                Ext.merge(Loader.config, name);
+            }
+            else {
+                Loader.config[name] = (Ext.isObject(value)) ? Ext.merge(Loader.config[name], value) : value;
+            }
+
+            return Loader;
+        },
+
+        /**
+         * Get the config value corresponding to the specified name. If no name is given, will return the config object
+         * @param {String} name The config property name
+         * @return {Object}
+         */
+        getConfig: function(name) {
+            if (name) {
+                return Loader.config[name];
+            }
+
+            return Loader.config;
+        },
+
+        /**
+         * Sets the path of a namespace.
+         * For Example:
+         *
+         *     Ext.Loader.setPath('Ext', '.');
+         *
+         * @param {String/Object} name See {@link Ext.Function#flexSetter flexSetter}
+         * @param {String} path See {@link Ext.Function#flexSetter flexSetter}
+         * @return {Ext.Loader} this
+         * @method
+         */
+        setPath: flexSetter(function(name, path) {
+            Loader.config.paths[name] = path;
+
+            return Loader;
+        }),
+
+        /**
+         * Translates a className to a file path by adding the
+         * the proper prefix and converting the .'s to /'s. For example:
+         *
+         *     Ext.Loader.setPath('My', '/path/to/My');
+         *
+         *     alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/path/to/My/awesome/Class.js'
+         *
+         * Note that the deeper namespace levels, if explicitly set, are always resolved first. For example:
+         *
+         *     Ext.Loader.setPath({
+         *         'My': '/path/to/lib',
+         *         'My.awesome': '/other/path/for/awesome/stuff',
+         *         'My.awesome.more': '/more/awesome/path'
+         *     });
+         *
+         *     alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/other/path/for/awesome/stuff/Class.js'
+         *
+         *     alert(Ext.Loader.getPath('My.awesome.more.Class')); // alerts '/more/awesome/path/Class.js'
+         *
+         *     alert(Ext.Loader.getPath('My.cool.Class')); // alerts '/path/to/lib/cool/Class.js'
+         *
+         *     alert(Ext.Loader.getPath('Unknown.strange.Stuff')); // alerts 'Unknown/strange/Stuff.js'
+         *
+         * @param {String} className
+         * @return {String} path
+         */
+        getPath: function(className) {
+            var path = '',
+                paths = Loader.config.paths,
+                prefix = Loader.getPrefix(className);
+
+            if (prefix.length > 0) {
+                if (prefix === className) {
+                    return paths[prefix];
+                }
+
+                path = paths[prefix];
+                className = className.substring(prefix.length + 1);
+            }
+
+            if (path.length > 0) {
+                path += '/';
+            }
+
+            return path.replace(slashDotSlashRe, '/') + className.replace(dotRe, "/") + '.js';
+        },
+
+        /**
+         * @private
+         * @param {String} className
+         */
+        getPrefix: function(className) {
+            var paths = Loader.config.paths,
+                prefix, deepestPrefix = '';
+
+            if (paths.hasOwnProperty(className)) {
+                return className;
+            }
+
+            for (prefix in paths) {
+                if (paths.hasOwnProperty(prefix) && prefix + '.' === className.substring(0, prefix.length + 1)) {
+                    if (prefix.length > deepestPrefix.length) {
+                        deepestPrefix = prefix;
+                    }
+                }
+            }
+
+            return deepestPrefix;
+        },
+
+        /**
+         * @private
+         * @param {String} className
+         */
+        isAClassNameWithAKnownPrefix: function(className) {
+            var prefix = Loader.getPrefix(className);
+
+            // we can only say it's really a class if className is not equal to any known namespace
+            return prefix !== '' && prefix !== className;
+        },
+
+        /**
+         * Loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when
+         * finishes, within the optional scope. This method is aliased by {@link Ext#require Ext.require} for convenience
+         * @param {String/Array} expressions Can either be a string or an array of string
+         * @param {Function} fn (Optional) The callback function
+         * @param {Object} scope (Optional) The execution scope (`this`) of the callback function
+         * @param {String/Array} excludes (Optional) Classes to be excluded, useful when being used with expressions
+         */
+        require: function(expressions, fn, scope, excludes) {
+            if (fn) {
+                fn.call(scope);
+            }
+        },
+
+        /**
+         * Synchronously loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when finishes, within the optional scope. This method is aliased by {@link Ext#syncRequire} for convenience
+         * @param {String/Array} expressions Can either be a string or an array of string
+         * @param {Function} fn (Optional) The callback function
+         * @param {Object} scope (Optional) The execution scope (`this`) of the callback function
+         * @param {String/Array} excludes (Optional) Classes to be excluded, useful when being used with expressions
+         */
+        syncRequire: function() {},
+
+        /**
+         * Explicitly exclude files from being loaded. Useful when used in conjunction with a broad include expression.
+         * Can be chained with more `require` and `exclude` methods, eg:
+         *
+         *     Ext.exclude('Ext.data.*').require('*');
+         *
+         *     Ext.exclude('widget.button*').require('widget.*');
+         *
+         * @param {Array} excludes
+         * @return {Object} object contains `require` method for chaining
+         */
+        exclude: function(excludes) {
+            return {
+                require: function(expressions, fn, scope) {
+                    return Loader.require(expressions, fn, scope, excludes);
+                },
+
+                syncRequire: function(expressions, fn, scope) {
+                    return Loader.syncRequire(expressions, fn, scope, excludes);
+                }
+            };
+        },
+
+        /**
+         * Add a new listener to be executed when all required scripts are fully loaded
+         *
+         * @param {Function} fn The function callback to be executed
+         * @param {Object} scope The execution scope (<code>this</code>) of the callback function
+         * @param {Boolean} withDomReady Whether or not to wait for document dom ready as well
+         */
+        onReady: function(fn, scope, withDomReady, options) {
+            var oldFn;
+
+            if (withDomReady !== false && Ext.onDocumentReady) {
+                oldFn = fn;
+
+                fn = function() {
+                    Ext.onDocumentReady(oldFn, scope, options);
+                };
+            }
+
+            fn.call(scope);
+        }
+    });
+
+    //<feature classSystem.loader>
+    var queue = [],
+        isClassFileLoaded = {},
+        isFileLoaded = {},
+        classNameToFilePathMap = {},
+        scriptElements = {},
+        readyListeners = [],
+        usedClasses = [],
+        requiresMap = {};
+
+    Ext.apply(Loader, {
+        /**
+         * @private
+         */
+        documentHead: typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]),
+
+        /**
+         * Flag indicating whether there are still files being loaded
+         * @private
+         */
+        isLoading: false,
+
+        /**
+         * Maintain the queue for all dependencies. Each item in the array is an object of the format:
+         *
+         *     {
+         *          requires: [...], // The required classes for this queue item
+         *          callback: function() { ... } // The function to execute when all classes specified in requires exist
+         *     }
+         *
+         * @private
+         */
+        queue: queue,
+
+        /**
+         * Maintain the list of files that have already been handled so that they never get double-loaded
+         * @private
+         */
+        isClassFileLoaded: isClassFileLoaded,
+
+        /**
+         * @private
+         */
+        isFileLoaded: isFileLoaded,
+
+        /**
+         * Maintain the list of listeners to execute when all required scripts are fully loaded
+         * @private
+         */
+        readyListeners: readyListeners,
+
+        /**
+         * Contains classes referenced in `uses` properties.
+         * @private
+         */
+        optionalRequires: usedClasses,
+
+        /**
+         * Map of fully qualified class names to an array of dependent classes.
+         * @private
+         */
+        requiresMap: requiresMap,
+
+        /**
+         * @private
+         */
+        numPendingFiles: 0,
+
+        /**
+         * @private
+         */
+        numLoadedFiles: 0,
+
+        /** @private */
+        hasFileLoadError: false,
+
+        /**
+         * @private
+         */
+        classNameToFilePathMap: classNameToFilePathMap,
+
+        /**
+         * The number of scripts loading via loadScript.
+         * @private
+         */
+        scriptsLoading: 0,
+
+        /**
+         * @private
+         */
+        syncModeEnabled: false,
+
+        scriptElements: scriptElements,
+
+        /**
+         * Refresh all items in the queue. If all dependencies for an item exist during looping,
+         * it will execute the callback and call refreshQueue again. Triggers onReady when the queue is
+         * empty
+         * @private
+         */
+        refreshQueue: function() {
+            var ln = queue.length,
+                i, item, j, requires;
+
+            // When the queue of loading classes reaches zero, trigger readiness
+
+            if (!ln && !Loader.scriptsLoading) {
+                return Loader.triggerReady();
+            }
+
+            for (i = 0; i < ln; i++) {
+                item = queue[i];
+
+                if (item) {
+                    requires = item.requires;
+
+                    // Don't bother checking when the number of files loaded
+                    // is still less than the array length
+                    if (requires.length > Loader.numLoadedFiles) {
+                        continue;
+                    }
+
+                    // Remove any required classes that are loaded
+                    for (j = 0; j < requires.length; ) {
+                        if (Manager.isCreated(requires[j])) {
+                            // Take out from the queue
+                            arrayErase(requires, j, 1);
+                        }
+                        else {
+                            j++;
+                        }
+                    }
+
+                    // If we've ended up with no required classes, call the callback
+                    if (item.requires.length === 0) {
+                        arrayErase(queue, i, 1);
+                        item.callback.call(item.scope);
+                        Loader.refreshQueue();
+                        break;
+                    }
+                }
+            }
+
+            return Loader;
+        },
+
+        /**
+         * Inject a script element to document's head, call onLoad and onError accordingly
+         * @private
+         */
+        injectScriptElement: function(url, onLoad, onError, scope, charset) {
+            var script = document.createElement('script'),
+                dispatched = false,
+                config = Loader.config,
+                onLoadFn = function() {
+
+                    if(!dispatched) {
+                        dispatched = true;
+                        script.onload = script.onreadystatechange = script.onerror = null;
+                        if (typeof config.scriptChainDelay == 'number') {
+                            //free the stack (and defer the next script)
+                            defer(onLoad, config.scriptChainDelay, scope);
+                        } else {
+                            onLoad.call(scope);
+                        }
+                        Loader.cleanupScriptElement(script, config.preserveScripts === false, config.garbageCollect);
+                    }
+
+                },
+                onErrorFn = function(arg) {
+                    defer(onError, 1, scope);   //free the stack
+                    Loader.cleanupScriptElement(script, config.preserveScripts === false, config.garbageCollect);
+                };
+
+            script.type = 'text/javascript';
+            script.onerror = onErrorFn;
+            charset = charset || config.scriptCharset;
+            if (charset) {
+                script.charset = charset;
+            }
+
+            /*
+             * IE9 Standards mode (and others) SHOULD follow the load event only
+             * (Note: IE9 supports both onload AND readystatechange events)
+             */
+            if ('addEventListener' in script ) {
+                script.onload = onLoadFn;
+            } else if ('readyState' in script) {   // for <IE9 Compatability
+                script.onreadystatechange = function() {
+                    if ( this.readyState == 'loaded' || this.readyState == 'complete' ) {
+                        onLoadFn();
+                    }
+                };
+            } else {
+                 script.onload = onLoadFn;
+            }
+
+            script.src = url;
+            (Loader.documentHead || document.getElementsByTagName('head')[0]).appendChild(script);
+
+            return script;
+        },
+
+        /**
+         * @private
+         */
+        removeScriptElement: function(url) {
+            if (scriptElements[url]) {
+                Loader.cleanupScriptElement(scriptElements[url], true, !!Loader.getConfig('garbageCollect'));
+                delete scriptElements[url];
+            }
+
+            return Loader;
+        },
+
+        /**
+         * @private
+         */
+        cleanupScriptElement: function(script, remove, collect) {
+            var prop;
+            script.onload = script.onreadystatechange = script.onerror = null;
+            if (remove) {
+                Ext.removeNode(script);       // Remove, since its useless now
+                if (collect) {
+                    for (prop in script) {
+                        try {
+                            script[prop] = null;
+                            delete script[prop];      // and prepare for GC
+                        } catch (cleanEx) {
+                            //ignore
+                        }
+                    }
+                }
+            }
+
+            return Loader;
+        },
+
+        /**
+         * Loads the specified script URL and calls the supplied callbacks. If this method
+         * is called before {@link Ext#isReady}, the script's load will delay the transition
+         * to ready. This can be used to load arbitrary scripts that may contain further
+         * {@link Ext#require Ext.require} calls.
+         *
+         * @param {Object/String} options The options object or simply the URL to load.
+         * @param {String} options.url The URL from which to load the script.
+         * @param {Function} [options.onLoad] The callback to call on successful load.
+         * @param {Function} [options.onError] The callback to call on failure to load.
+         * @param {Object} [options.scope] The scope (`this`) for the supplied callbacks.
+         */
+        loadScript: function (options) {
+            var config = Loader.getConfig(),
+                isString = typeof options == 'string',
+                url = isString ? options : options.url,
+                onError = !isString && options.onError,
+                onLoad = !isString && options.onLoad,
+                scope = !isString && options.scope,
+                onScriptError = function() {
+                    Loader.numPendingFiles--;
+                    Loader.scriptsLoading--;
+
+                    if (onError) {
+                        onError.call(scope, "Failed loading '" + url + "', please verify that the file exists");
+                    }
+
+                    if (Loader.numPendingFiles + Loader.scriptsLoading === 0) {
+                        Loader.refreshQueue();
+                    }
+                },
+                onScriptLoad = function () {
+                    Loader.numPendingFiles--;
+                    Loader.scriptsLoading--;
+
+                    if (onLoad) {
+                        onLoad.call(scope);
+                    }
+
+                    if (Loader.numPendingFiles + Loader.scriptsLoading === 0) {
+                        Loader.refreshQueue();
+                    }
+                },
+                src;
+
+            Loader.isLoading = true;
+            Loader.numPendingFiles++;
+            Loader.scriptsLoading++;
+
+            src = config.disableCaching ?
+                (url + '?' + config.disableCachingParam + '=' + Ext.Date.now()) : url;
+
+            scriptElements[url] = Loader.injectScriptElement(src, onScriptLoad, onScriptError);
+        },
+
+        /**
+         * Load a script file, supports both asynchronous and synchronous approaches
+         * @private
+         */
+        loadScriptFile: function(url, onLoad, onError, scope, synchronous) {
+            if (isFileLoaded[url]) {
+                return Loader;
+            }
+
+            var config = Loader.getConfig(),
+                noCacheUrl = url + (config.disableCaching ? ('?' + config.disableCachingParam + '=' + Ext.Date.now()) : ''),
+                isCrossOriginRestricted = false,
+                xhr, status, onScriptError;
+
+            scope = scope || Loader;
+
+            Loader.isLoading = true;
+
+            if (!synchronous) {
+                onScriptError = function() {
+                    //<debug error>
+                    onError.call(scope, "Failed loading '" + url + "', please verify that the file exists", synchronous);
+                    //</debug>
+                };
+
+                scriptElements[url] = Loader.injectScriptElement(noCacheUrl, onLoad, onScriptError, scope);
+            } else {
+                if (typeof XMLHttpRequest != 'undefined') {
+                    xhr = new XMLHttpRequest();
+                } else {
+                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
+                }
+
+                try {
+                    xhr.open('GET', noCacheUrl, false);
+                    xhr.send(null);
+                } catch (e) {
+                    isCrossOriginRestricted = true;
+                }
+
+                status = (xhr.status === 1223) ? 204 :
+                    (xhr.status === 0 && (self.location || {}).protocol == 'file:') ? 200 : xhr.status;
+
+                isCrossOriginRestricted = isCrossOriginRestricted || (status === 0);
+
+                if (isCrossOriginRestricted
+                    //<if isNonBrowser>
+                    && !isPhantomJS
+                    //</if>
+                ) {
+                    //<debug error>
+                    onError.call(Loader, "Failed loading synchronously via XHR: '" + url + "'; It's likely that the file is either " +
+                                       "being loaded from a different domain or from the local file system whereby cross origin " +
+                                       "requests are not allowed due to security reasons. Use asynchronous loading with " +
+                                       "Ext.require instead.", synchronous);
+                    //</debug>
+                }
+                else if ((status >= 200 && status < 300) || (status === 304)
+                    //<if isNonBrowser>
+                    || isPhantomJS
+                    //</if>
+                ) {
+                    // Debugger friendly, file names are still shown even though they're eval'ed code
+                    // Breakpoints work on both Firebug and Chrome's Web Inspector
+                    Ext.globalEval(xhr.responseText + "\n//@ sourceURL=" + url);
+
+                    onLoad.call(scope);
+                }
+                else {
+                    //<debug>
+                    onError.call(Loader, "Failed loading synchronously via XHR: '" + url + "'; please " +
+                                       "verify that the file exists. " +
+                                       "XHR status code: " + status, synchronous);
+                    //</debug>
+                }
+
+                // Prevent potential IE memory leak
+                xhr = null;
+            }
+        },
+
+        // documented above
+        syncRequire: function() {
+            var syncModeEnabled = Loader.syncModeEnabled;
+
+            if (!syncModeEnabled) {
+                Loader.syncModeEnabled = true;
+            }
+
+            Loader.require.apply(Loader, arguments);
+
+            if (!syncModeEnabled) {
+                Loader.syncModeEnabled = false;
+            }
+
+            Loader.refreshQueue();
+        },
+
+        // documented above
+        require: function(expressions, fn, scope, excludes) {
+            var excluded = {},
+                included = {},
+                excludedClassNames = [],
+                possibleClassNames = [],
+                classNames = [],
+                references = [],
+                callback,
+                syncModeEnabled,
+                filePath, expression, exclude, className,
+                possibleClassName, i, j, ln, subLn;
+
+            if (excludes) {
+                // Convert possible single string to an array.
+                excludes = (typeof excludes === 'string') ? [ excludes ] : excludes;
+
+                for (i = 0,ln = excludes.length; i < ln; i++) {
+                    exclude = excludes[i];
+
+                    if (typeof exclude == 'string' && exclude.length > 0) {
+                        excludedClassNames = Manager.getNamesByExpression(exclude);
+
+                        for (j = 0,subLn = excludedClassNames.length; j < subLn; j++) {
+                            excluded[excludedClassNames[j]] = true;
+                        }
+                    }
+                }
+            }
+
+            // Convert possible single string to an array.
+            expressions = (typeof expressions === 'string') ? [ expressions ] : (expressions ? expressions : []);
+
+            if (fn) {
+                if (fn.length > 0) {
+                    callback = function() {
+                        var classes = [],
+                            i, ln;
+
+                        for (i = 0,ln = references.length; i < ln; i++) {
+                            classes.push(Manager.get(references[i]));
+                        }
+
+                        return fn.apply(this, classes);
+                    };
+                }
+                else {
+                    callback = fn;
+                }
+            }
+            else {
+                callback = Ext.emptyFn;
+            }
+
+            scope = scope || Ext.global;
+
+            for (i = 0,ln = expressions.length; i < ln; i++) {
+                expression = expressions[i];
+
+                if (typeof expression == 'string' && expression.length > 0) {
+                    possibleClassNames = Manager.getNamesByExpression(expression);
+                    subLn = possibleClassNames.length;
+
+                    for (j = 0; j < subLn; j++) {
+                        possibleClassName = possibleClassNames[j];
+
+                        if (excluded[possibleClassName] !== true) {
+                            references.push(possibleClassName);
+
+                            if (!Manager.isCreated(possibleClassName) && !included[possibleClassName]) {
+                                included[possibleClassName] = true;
+                                classNames.push(possibleClassName);
+                            }
+                        }
+                    }
+                }
+            }
+
+            // If the dynamic dependency feature is not being used, throw an error
+            // if the dependencies are not defined
+            if (classNames.length > 0) {
+                if (!Loader.config.enabled) {
+                    throw new Error("Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. " +
+                             "Missing required class" + ((classNames.length > 1) ? "es" : "") + ": " + classNames.join(', '));
+                }
+            }
+            else {
+                callback.call(scope);
+                return Loader;
+            }
+
+            syncModeEnabled = Loader.syncModeEnabled;
+
+            if (!syncModeEnabled) {
+                queue.push({
+                    requires: classNames.slice(), // this array will be modified as the queue is processed,
+                                                  // so we need a copy of it
+                    callback: callback,
+                    scope: scope
+                });
+            }
+
+            ln = classNames.length;
+
+            for (i = 0; i < ln; i++) {
+                className = classNames[i];
+
+                filePath = Loader.getPath(className);
+
+                // If we are synchronously loading a file that has already been asychronously loaded before
+                // we need to destroy the script tag and revert the count
+                // This file will then be forced loaded in synchronous
+                if (syncModeEnabled && isClassFileLoaded.hasOwnProperty(className)) {
+                    Loader.numPendingFiles--;
+                    Loader.removeScriptElement(filePath);
+                    delete isClassFileLoaded[className];
+                }
+
+                if (!isClassFileLoaded.hasOwnProperty(className)) {
+                    isClassFileLoaded[className] = false;
+
+                    classNameToFilePathMap[className] = filePath;
+
+                    Loader.numPendingFiles++;
+                    Loader.loadScriptFile(
+                        filePath,
+                        pass(Loader.onFileLoaded, [className, filePath], Loader),
+                        pass(Loader.onFileLoadError, [className, filePath], Loader),
+                        Loader,
+                        syncModeEnabled
+                    );
+                }
+            }
+
+            if (syncModeEnabled) {
+                callback.call(scope);
+
+                if (ln === 1) {
+                    return Manager.get(className);
+                }
+            }
+
+            return Loader;
+        },
+
+        /**
+         * @private
+         * @param {String} className
+         * @param {String} filePath
+         */
+        onFileLoaded: function(className, filePath) {
+            Loader.numLoadedFiles++;
+
+            isClassFileLoaded[className] = true;
+            isFileLoaded[filePath] = true;
+
+            Loader.numPendingFiles--;
+
+            if (Loader.numPendingFiles === 0) {
+                Loader.refreshQueue();
+            }
+
+            //<debug>
+            if (!Loader.syncModeEnabled && Loader.numPendingFiles === 0 && Loader.isLoading && !Loader.hasFileLoadError) {
+                var missingClasses = [],
+                    missingPaths = [],
+                    requires,
+                    i, ln, j, subLn;
+
+                for (i = 0,ln = queue.length; i < ln; i++) {
+                    requires = queue[i].requires;
+
+                    for (j = 0,subLn = requires.length; j < subLn; j++) {
+                        if (isClassFileLoaded[requires[j]]) {
+                            missingClasses.push(requires[j]);
+                        }
+                    }
+                }
+
+                if (missingClasses.length < 1) {
+                    return;
+                }
+
+                missingClasses = Ext.Array.filter(Ext.Array.unique(missingClasses), function(item) {
+                    return !requiresMap.hasOwnProperty(item);
+                }, Loader);
+
+                for (i = 0,ln = missingClasses.length; i < ln; i++) {
+                    missingPaths.push(classNameToFilePathMap[missingClasses[i]]);
+                }
+
+                throw new Error("The following classes are not declared even if their files have been " +
+                    "loaded: '" + missingClasses.join("', '") + "'. Please check the source code of their " +
+                    "corresponding files for possible typos: '" + missingPaths.join("', '"));
+            }
+            //</debug>
+        },
+
+        /**
+         * @private
+         */
+        onFileLoadError: function(className, filePath, errorMessage, isSynchronous) {
+            Loader.numPendingFiles--;
+            Loader.hasFileLoadError = true;
+
+            //<debug error>
+            throw new Error("[Ext.Loader] " + errorMessage);
+            //</debug>
+        },
+
+        /**
+         * @private
+         * Ensure that any classes referenced in the `uses` property are loaded.
+         */
+        addUsedClasses: function (classes) {
+            var cls, i, ln;
+
+            if (classes) {
+                classes = (typeof classes == 'string') ? [classes] : classes;
+                for (i = 0, ln = classes.length; i < ln; i++) {
+                    cls = classes[i];
+                    if (typeof cls == 'string' && !Ext.Array.contains(usedClasses, cls)) {
+                        usedClasses.push(cls);
+                    }
+                }
+            }
+
+            return Loader;
+        },
+
+        /**
+         * @private
+         */
+        triggerReady: function() {
+            var listener,
+                i, refClasses = usedClasses;
+
+            if (Loader.isLoading) {
+                Loader.isLoading = false;
+
+                if (refClasses.length !== 0) {
+                    // Clone then empty the array to eliminate potential recursive loop issue
+                    refClasses = refClasses.slice();
+                    usedClasses.length = 0;
+                    // this may immediately call us back if all 'uses' classes
+                    // have been loaded
+                    Loader.require(refClasses, Loader.triggerReady, Loader);
+                    return Loader;
+                }
+            }
+
+            // this method can be called with Loader.isLoading either true or false
+            // (can be called with false when all 'uses' classes are already loaded)
+            // this may bypass the above if condition
+            while (readyListeners.length && !Loader.isLoading) {
+                // calls to refreshQueue may re-enter triggerReady
+                // so we cannot necessarily iterate the readyListeners array
+                listener = readyListeners.shift();
+                listener.fn.call(listener.scope);
+            }
+
+            return Loader;
+        },
+
+        // Documented above already
+        onReady: function(fn, scope, withDomReady, options) {
+            var oldFn;
+
+            if (withDomReady !== false && Ext.onDocumentReady) {
+                oldFn = fn;
+
+                fn = function() {
+                    Ext.onDocumentReady(oldFn, scope, options);
+                };
+            }
+
+            if (!Loader.isLoading) {
+                fn.call(scope);
+            }
+            else {
+                readyListeners.push({
+                    fn: fn,
+                    scope: scope
+                });
+            }
+        },
+
+        /**
+         * @private
+         * @param {String} className
+         */
+        historyPush: function(className) {
+            if (className && isClassFileLoaded.hasOwnProperty(className) && !isInHistory[className]) {
+                isInHistory[className] = true;
+                history.push(className);
+            }
+            return Loader;
+        }
+    });
+
+    /**
+     * Turns on or off the "cache buster" applied to dynamically loaded scripts. Normally
+     * dynamically loaded scripts have an extra query parameter appended to avoid stale
+     * cached scripts. This method can be used to disable this mechanism, and is primarily
+     * useful for testing. This is done using a cookie.
+     * @param {Boolean} disable True to disable the cache buster.
+     * @param {String} [path="/"] An optional path to scope the cookie.
+     * @private
+     */
+    Ext.disableCacheBuster = function (disable, path) {
+        var date = new Date();
+        date.setTime(date.getTime() + (disable ? 10*365 : -1) * 24*60*60*1000);
+        date = date.toGMTString();
+        document.cookie = 'ext-cache=1; expires=' + date + '; path='+(path || '/');
+    };
+
+    //<if nonBrowser>
+    if (isNonBrowser) {
+        if (isNodeJS) {
+            Ext.apply(Loader, {
+                syncModeEnabled: true,
+                setPath: flexSetter(function(name, path) {
+                    path = require('fs').realpathSync(path);
+                    Loader.config.paths[name] = path;
+
+                    return Loader;
+                }),
+
+                loadScriptFile: function(filePath, onLoad, onError, scope, synchronous) {
+                    require(filePath);
+                    onLoad.call(scope);
+                }
+            });
+        }
+        else if (isJsdb) {
+            Ext.apply(Loader, {
+                syncModeEnabled: true,
+                loadScriptFile: function(filePath, onLoad, onError, scope, synchronous) {
+                    load(filePath);
+                    onLoad.call(scope);
+                }
+            });
+        }
+    }
+    //</if>
+    //</feature>
+
+    /**
+     * Convenient alias of {@link Ext.Loader#require}. Please see the introduction documentation of
+     * {@link Ext.Loader} for examples.
+     * @member Ext
+     * @method require
+     */
+    Ext.require = alias(Loader, 'require');
+
+    /**
+     * Synchronous version of {@link Ext#require}, convenient alias of {@link Ext.Loader#syncRequire}.
+     *
+     * @member Ext
+     * @method syncRequire
+     */
+    Ext.syncRequire = alias(Loader, 'syncRequire');
+
+    /**
+     * Convenient shortcut to {@link Ext.Loader#exclude}
+     * @member Ext
+     * @method exclude
+     */
+    Ext.exclude = alias(Loader, 'exclude');
+
+    /**
+     * @member Ext
+     * @method onReady
+     */
+    Ext.onReady = function(fn, scope, options) {
+        Loader.onReady(fn, scope, true, options);
+    };
+
+    /**
+     * @cfg {String[]} requires
+     * @member Ext.Class
+     * List of classes that have to be loaded before instantiating this class.
+     * For example:
+     *
+     *     Ext.define('Mother', {
+     *         requires: ['Child'],
+     *         giveBirth: function() {
+     *             // we can be sure that child class is available.
+     *             return new Child();
+     *         }
+     *     });
+     */
+    Class.registerPreprocessor('loader', function(cls, data, hooks, continueFn) {
+        var me = this,
+            dependencies = [],
+            dependency,
+            className = Manager.getName(cls),
+            i, j, ln, subLn, value, propertyName, propertyValue,
+            requiredMap, requiredDep;
+
+        /*
+        Loop through the dependencyProperties, look for string class names and push
+        them into a stack, regardless of whether the property's value is a string, array or object. For example:
+        {
+              extend: 'Ext.MyClass',
+              requires: ['Ext.some.OtherClass'],
+              mixins: {
+                  observable: 'Ext.util.Observable';
+              }
+        }
+        which will later be transformed into:
+        {
+              extend: Ext.MyClass,
+              requires: [Ext.some.OtherClass],
+              mixins: {
+                  observable: Ext.util.Observable;
+              }
+        }
+        */
+
+        for (i = 0,ln = dependencyProperties.length; i < ln; i++) {
+            propertyName = dependencyProperties[i];
+
+            if (data.hasOwnProperty(propertyName)) {
+                propertyValue = data[propertyName];
+
+                if (typeof propertyValue == 'string') {
+                    dependencies.push(propertyValue);
+                }
+                else if (propertyValue instanceof Array) {
+                    for (j = 0, subLn = propertyValue.length; j < subLn; j++) {
+                        value = propertyValue[j];
+
+                        if (typeof value == 'string') {
+                            dependencies.push(value);
+                        }
+                    }
+                }
+                else if (typeof propertyValue != 'function') {
+                    for (j in propertyValue) {
+                        if (propertyValue.hasOwnProperty(j)) {
+                            value = propertyValue[j];
+
+                            if (typeof value == 'string') {
+                                dependencies.push(value);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        if (dependencies.length === 0) {
+            return;
+        }
+
+        //<feature classSystem.loader>
+        //<debug error>
+        var deadlockPath = [],
+            detectDeadlock;
+
+        /*
+        Automatically detect deadlocks before-hand,
+        will throw an error with detailed path for ease of debugging. Examples of deadlock cases:
+
+        - A extends B, then B extends A
+        - A requires B, B requires C, then C requires A
+
+        The detectDeadlock function will recursively transverse till the leaf, hence it can detect deadlocks
+        no matter how deep the path is.
+        */
+
+        if (className) {
+            requiresMap[className] = dependencies;
+            //<debug>
+            requiredMap = Loader.requiredByMap || (Loader.requiredByMap = {});
+
+            for (i = 0,ln = dependencies.length; i < ln; i++) {
+                dependency = dependencies[i];
+                (requiredMap[dependency] || (requiredMap[dependency] = [])).push(className);
+            }
+            //</debug>
+            detectDeadlock = function(cls) {
+                deadlockPath.push(cls);
+
+                if (requiresMap[cls]) {
+                    if (Ext.Array.contains(requiresMap[cls], className)) {
+                        throw new Error("Deadlock detected while loading dependencies! '" + className + "' and '" +
+                                deadlockPath[1] + "' " + "mutually require each other. Path: " +
+                                deadlockPath.join(' -> ') + " -> " + deadlockPath[0]);
+                    }
+
+                    for (i = 0,ln = requiresMap[cls].length; i < ln; i++) {
+                        detectDeadlock(requiresMap[cls][i]);
+                    }
+                }
+            };
+
+            detectDeadlock(className);
+        }
+
+        //</debug>
+        //</feature>
+
+        Loader.require(dependencies, function() {
+            for (i = 0,ln = dependencyProperties.length; i < ln; i++) {
+                propertyName = dependencyProperties[i];
+
+                if (data.hasOwnProperty(propertyName)) {
+                    propertyValue = data[propertyName];
+
+                    if (typeof propertyValue == 'string') {
+                        data[propertyName] = Manager.get(propertyValue);
+                    }
+                    else if (propertyValue instanceof Array) {
+                        for (j = 0, subLn = propertyValue.length; j < subLn; j++) {
+                            value = propertyValue[j];
+
+                            if (typeof value == 'string') {
+                                data[propertyName][j] = Manager.get(value);
+                            }
+                        }
+                    }
+                    else if (typeof propertyValue != 'function') {
+                        for (var k in propertyValue) {
+                            if (propertyValue.hasOwnProperty(k)) {
+                                value = propertyValue[k];
+
+                                if (typeof value == 'string') {
+                                    data[propertyName][k] = Manager.get(value);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            continueFn.call(me, cls, data, hooks);
+        });
+
+        return false;
+    }, true, 'after', 'className');
+
+    //<feature classSystem.loader>
+    /**
+     * @cfg {String[]} uses
+     * @member Ext.Class
+     * List of optional classes to load together with this class. These aren't neccessarily loaded before
+     * this class is created, but are guaranteed to be available before Ext.onReady listeners are
+     * invoked. For example:
+     *
+     *     Ext.define('Mother', {
+     *         uses: ['Child'],
+     *         giveBirth: function() {
+     *             // This code might, or might not work:
+     *             // return new Child();
+     *
+     *             // Instead use Ext.create() to load the class at the spot if not loaded already:
+     *             return Ext.create('Child');
+     *         }
+     *     });
+     */
+    Manager.registerPostprocessor('uses', function(name, cls, data) {
+        var uses = data.uses;
+        if (uses) {
+            Loader.addUsedClasses(uses);
+        }
+    });
+
+    Manager.onCreated(Loader.historyPush);
+    //</feature>
+};