/** * 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; } });