/**
- * @class Ext.app.Application
- * @constructor
- *
- * Represents an Ext JS 4 application, which is typically a single page app using a {@link Ext.container.Viewport Viewport}.
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * 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'
- }
- });
- }
- });
- *
+ *
+ * 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.
- *
+ *
* 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.
- *
- * <u>Telling Application about the rest of the app</u>
- *
+ *
+ * # 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() {
- ...
- }
- });
- *
+ *
+ * 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 <a href="../guide/application_architecture">application
- * architecture guide</a> - 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
+ * 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
- });
- *
+ *
+ * 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
+ * files whenever we add a new class, but more importantly it enables us to create a minimized build of our entire
* application using the Ext JS 4 SDK Tools.
- *
- * For more information about writing Ext JS 4 applications, please see the <a href="../guide/application_architecture">
- * application architecture guide</a>.
- *
- * @markdown
+ *
+ * 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', {
@@ -78,38 +93,42 @@ Ext.define('Ext.app.Application', {
'Ext.app.EventBus'
],
- /**
- * @cfg {Object} name The name of your application. This will also be the namespace for your views, controllers
+ /**
+ * @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.
*/
- /**
+ /**
* @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 (defaults to true)
+ /**
+ * @cfg {Boolean} enableQuickTips True to automatically set up Ext.tip.QuickTip support.
*/
enableQuickTips: true,
- /**
- * @cfg {String} defaultUrl When the app is first loaded, this url will be redirected to. Defaults to undefined
+ /**
+ * @cfg {String} defaultUrl When the app is first loaded, this url will be redirected to.
*/
- /**
+ /**
* @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.
- * Defaults to 'app'
*/
appFolder: 'app',
- /**
- * @cfg {Boolean} autoCreateViewport Automatically loads and instantiates AppName.view.Viewport before firing the launch function.
+ /**
+ * @cfg {Boolean} autoCreateViewport True to automatically load and instantiate AppName.view.Viewport
+ * before firing the launch function.
*/
- autoCreateViewport: true,
+ autoCreateViewport: false,
+ /**
+ * Creates new Application.
+ * @param {Object} [config] Config object.
+ */
constructor: function(config) {
config = config || {};
Ext.apply(this, config);
@@ -128,8 +147,8 @@ Ext.define('Ext.app.Application', {
this.eventbus = Ext.create('Ext.app.EventBus');
- var controllers = this.controllers,
- ln = controllers.length,
+ var controllers = Ext.Array.from(this.controllers),
+ ln = controllers && controllers.length,
i, controller;
this.controllers = Ext.create('Ext.util.MixedCollection');
@@ -158,7 +177,7 @@ Ext.define('Ext.app.Application', {
this.eventbus.control(selectors, listeners, controller);
},
- /**
+ /**
* 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
* @property launch
@@ -169,7 +188,7 @@ Ext.define('Ext.app.Application', {
*/
launch: Ext.emptyFn,
- /**
+ /**
* @private
*/
onBeforeLaunch: function() {
@@ -239,4 +258,6 @@ Ext.define('Ext.app.Application', {
return Ext.ClassManager.get(view);
}
});
-