    /**
     * Represents an Ext JS 4 application, which is typically a single page app using a {@link Ext.container.Viewport Viewport}.
     * A typical Ext.app.Application might look like this:
     *
     *     Ext.application({
     *         name: 'MyApp',
     *         launch: function() {
     *             Ext.create('Ext.container.Viewport', {
     *                 items: {
     *                     html: 'My App'
     *                 }
     *             });
     *         }
     *     });
     *
     * This does several things. First it creates a global variable called 'MyApp' - all of your Application's classes (such
     * as its Models, Views and Controllers) will reside under this single namespace, which drastically lowers the chances
     * of colliding global variables. The MyApp global will also have a getApplication method to get a reference to
     * the current application:
     *
     *     var app = MyApp.getApplication();
     *
     * When the page is ready and all of your JavaScript has loaded, your Application's {@link #launch} function is called,
     * at which time you can run the code that starts your app. Usually this consists of creating a Viewport, as we do in
     * the example above.
     *
     * # Telling Application about the rest of the app
     *
     * Because an Ext.app.Application represents an entire app, we should tell it about the other parts of the app - namely
     * the Models, Views and Controllers that are bundled with the application. Let's say we have a blog management app; we
     * might have Models and Controllers for Posts and Comments, and Views for listing, adding and editing Posts and Comments.
     * Here's how we'd tell our Application about all these things:
     *
     *     Ext.application({
     *         name: 'Blog',
     *         models: ['Post', 'Comment'],
     *         controllers: ['Posts', 'Comments'],
     *
     *         launch: function() {
     *             ...
     *         }
     *     });
     *
     * Note that we didn't actually list the Views directly in the Application itself. This is because Views are managed by
     * Controllers, so it makes sense to keep those dependencies there. The Application will load each of the specified
     * Controllers using the pathing conventions laid out in the [application architecture guide][mvc] - in this case
     * expecting the controllers to reside in app/controller/Posts.js and app/controller/Comments.js. In turn, each
     * Controller simply needs to list the Views it uses and they will be automatically loaded. Here's how our Posts
     * controller like be defined:
     *
     *     Ext.define('MyApp.controller.Posts', {
     *         extend: 'Ext.app.Controller',
     *         views: ['posts.List', 'posts.Edit'],
     *
     *         //the rest of the Controller here
     *     });
     *
     * Because we told our Application about our Models and Controllers, and our Controllers about their Views, Ext JS will
     * automatically load all of our app files for us. This means we don't have to manually add script tags into our html
     * files whenever we add a new class, but more importantly it enables us to create a minimized build of our entire
     * application using Sencha Cmd.
     *
     * # Deriving from Ext.app.Application
     *
     * Typically, applications do not derive directly from Ext.app.Application. Rather, the
     * configuration passed to `Ext.application` mimics what you might do in a derived class.
     * In some cases, however, it can be desirable to share logic by using a derived class
     * from `Ext.app.Application`.
     *
     * Derivation works as you would expect, but using the derived class should still be the
     * job of the `Ext.application` method.
     *
     *     Ext.define('MyApp.app.Application', {
     *         extend: 'Ext.app.Application',
     *         name: 'MyApp',
     *         ...
     *     });
     *
     *     Ext.application('MyApp.app.Application');
     *
     * For more information about writing Ext JS 4 applications, please see the [application architecture guide][mvc].
     *
     * [mvc]: #/guide/application_architecture
     *
     * @docauthor Ed Spencer
     */
    Ext.define('Ext.app.Application', {
        extend: 'Ext.app.Controller',

        requires: [
            'Ext.tip.QuickTipManager'
        ],

        /**
         * @cfg {String} name
         * The name of your application. This will also be the namespace for your views, controllers
         * models and stores. Don't use spaces or special characters in the name. **Application name
         * is mandatory**.
         */

        /**
         * @cfg {String/String[]} controllers
         * Names of controllers that the app uses.
         */

        /**
         * @cfg {Object} scope
         * The scope to execute the {@link #launch} function in. Defaults to the Application instance.
         */
        scope: undefined,

        /**
         * @cfg {Boolean} enableQuickTips
         * True to automatically set up Ext.tip.QuickTip support.
         */
        enableQuickTips: true,

        /**
         * @cfg {String} appFolder
         * The path to the directory which contains all application's classes.
         * This path will be registered via {@link Ext.Loader#setPath} for the namespace specified
         * in the {@link #name name} config.
         */
        appFolder: 'app',
        // NOTE - this config has to be processed by Ext.application

        /**
         * @cfg {String} appProperty
         * The name of a property to be assigned to the main namespace to gain a reference to
         * this application. Can be set to an empty value to prevent the reference from
         * being created
         *
         *     Ext.application({
         *         name: 'MyApp',
         *         appProperty: 'myProp',
         *
         *         launch: function() {
         *             console.log(MyApp.myProp === this);
         *         }
         *     });
         */
        appProperty: 'app',

        /**
         * @cfg {String/String[]} [namespaces]
         *
         * The list of namespace prefixes used in the application to resolve dependencies
         * like Views and Stores:
         *
         *      Ext.application({
         *          name: 'MyApp',
         *
         *          namespaces: ['Common.code'],
         *
         *          controllers: [ 'Common.code.controller.Foo', 'Bar' ]
         *      });
         *
         *      Ext.define('Common.code.controller.Foo', {
         *          extend: 'Ext.app.Controller',
         *
         *          models: ['Foo'],    // Loads Common.code.model.Foo
         *          views:  ['Bar']     // Loads Common.code.view.Bar
         *      });
         *
         *      Ext.define('MyApp.controller.Bar', {
         *          extend: 'Ext.app.Controller',
         *
         *          models: ['Foo'],    // Loads MyApp.model.Foo
         *          views:  ['Bar']     // Loads MyApp.view.Bar
         *      });
         *
         * You don't need to include main namespace (MyApp), it will be added to the list
         * automatically.
         */
        namespaces: [],

        /**
         * @cfg {Boolean} [autoCreateViewport=false]
         * True to automatically load and instantiate AppName.view.Viewport before firing the launch
         * function.
         */
        autoCreateViewport: false,

        /**
         * @cfg {Object} paths
         * Additional load paths to add to Ext.Loader.
         * See {@link Ext.Loader#paths} config for more details.
         */
        paths: null,

        onClassExtended: function(cls, data, hooks) {
            var Controller = Ext.app.Controller,
                proto = cls.prototype,
                requires = [],
                onBeforeClassCreated, paths, namespace, ns, appFolder;

            // Ordinary inheritance does not work here so we collect
            // necessary data from current class data and its superclass
            namespace = data.name      || cls.superclass.name;
            appFolder = data.appFolder || cls.superclass.appFolder;

            if (namespace) {
                data.$namespace = namespace;
                Ext.app.addNamespaces(namespace);
            }

            if (data.namespaces) {
                Ext.app.addNamespaces(data.namespaces);
            }

            if (!data['paths processed']) {
                if (namespace && appFolder) {
                    Ext.Loader.setPath(namespace, appFolder);
                }

                paths = data.paths;

                if (paths) {
                    for (ns in paths) {
                        if (paths.hasOwnProperty(ns)) {
                            Ext.Loader.setPath(ns, paths[ns]);
                        }
                    }
                }
            }
            else {
                delete data['paths processed'];
            }

            if (data.autoCreateViewport) {
                //<debug>
                if (!namespace) {
                    Ext.Error.raise("[Ext.app.Application] Can't resolve namespace for " +
                                    data.$className + ", did you forget to specify 'name' property?");
                }
                //</debug>

                Controller.processDependencies(proto, requires, namespace, 'view', ['Viewport']);
            }

            // Any "requires" also have to be processed before we fire up the App instance.
            if (requires.length) {
                onBeforeClassCreated = hooks.onBeforeCreated;

                hooks.onBeforeCreated = function(cls, data) {
                    var args = Ext.Array.clone(arguments);

                    Ext.require(requires, function () {
                        return onBeforeClassCreated.apply(this, args);
                    });
                };
            }
        },

        /**
         * Creates new Application.
         * @param {Object} [config] Config object.
         */
        constructor: function(config) {
            var me = this;

            //<debug>
            if (Ext.isEmpty(me.name)) {
                Ext.Error.raise("[Ext.app.Application] Name property is required");
            }
            //</debug>

            me.callParent(arguments);

            me.doInit(me);

            me.initNamespace();
            me.initControllers();
            me.onBeforeLaunch();

            me.finishInitControllers();
        },

        initNamespace: function() {
            var me = this,
                appProperty = me.appProperty,
                ns;

            ns = Ext.namespace(me.name);

            if (ns) {
                ns.getApplication = function() {
                    return me;
                };

                if (appProperty) {
                    if (!ns[appProperty]) {
                        ns[appProperty] = me;
                    }
                    //<debug>
                    else if (ns[appProperty] !== me) {
                        Ext.log.warn('An existing reference is being overwritten for ' + name + '.' + appProperty +
                            '. See the appProperty config.'
                        );
                    }
                    //</debug>
                }
            }
        },

        initControllers: function() {
            var me = this,
                controllers = Ext.Array.from(me.controllers);

            me.controllers = new Ext.util.MixedCollection();

            for (var i = 0, ln = controllers.length; i < ln; i++) {
                me.getController(controllers[i]);
            }
        },

        finishInitControllers: function() {
            var me = this,
                controllers, i, l;

            controllers = me.controllers.getRange();

            for (i = 0, l = controllers.length; i < l; i++) {
                controllers[i].finishInit(me);
            }
        },

        /**
         * @method
         * @template
         * Called automatically when the page has completely loaded. This is an empty function that should be
         * overridden by each application that needs to take action on page load.
         * @param {String} profile The detected application profile
         * @return {Boolean} By default, the Application will dispatch to the configured startup controller and
         * action immediately after running the launch function. Return false to prevent this behavior.
         */
        launch: Ext.emptyFn,

        /**
         * @private
         */
        onBeforeLaunch: function() {
            var me = this,
                controllers, c, cLen, controller;

            if (me.enableQuickTips) {
                me.initQuickTips();
            }

            if (me.autoCreateViewport) {
                me.initViewport();
            }

            me.launch.call(me.scope || me);
            me.launched = true;
            me.fireEvent('launch', me);

            controllers = me.controllers.items;
            cLen        = controllers.length;

            for (c = 0; c < cLen; c++) {
                controller = controllers[c];
                controller.onLaunch(me);
            }
        },

        getModuleClassName: function(name, kind) {
            return Ext.app.Controller.getFullName(name, kind, this.name).absoluteName;
        },

        initQuickTips: function() {
            Ext.tip.QuickTipManager.init();
        },

        initViewport: function() {
            var viewport = this.getView('Viewport');

            if (viewport) {
                viewport.create();
            }
        },

        getController: function(name) {
            var me          = this,
                controllers = me.controllers,
                className, controller;

            controller = controllers.get(name);

            if (!controller) {
                className  = me.getModuleClassName(name, 'controller');

                controller = Ext.create(className, {
                    application: me,
                    id:          name
                });

                controllers.add(controller);

                if (me._initialized) {
                    controller.doInit(me);
                }
            }

            return controller;
        },

        getApplication: function() {
            return this;
        }
    });