Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Application.html
index b38de5f..b3623d3 100644 (file)
@@ -1,69 +1,84 @@
-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-app.Application-method-constructor'><span id='Ext-app.Application'>/**
-</span></span> * @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}.
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-app-Application'>/**
+</span> * 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.
- * 
- * &lt;u&gt;Telling Application about the rest of the app&lt;/u&gt;
- * 
+ *
+ * # 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 &lt;a href=&quot;../guide/application_architecture&quot;&gt;application 
- * architecture guide&lt;/a&gt; - 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 &lt;a href=&quot;../guide/application_architecture&quot;&gt;
- * application architecture guide&lt;/a&gt;.
- * 
- * @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'
     ],
 
-<span id='Ext-app.Application-cfg-name'>    /**
-</span>     * @cfg {Object} name The name of your application. This will also be the namespace for your views, controllers
+<span id='Ext-app-Application-cfg-name'>    /**
+</span>     * @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.
      */
 
-<span id='Ext-app.Application-cfg-scope'>    /**
+<span id='Ext-app-Application-cfg-scope'>    /**
 </span>     * @cfg {Object} scope The scope to execute the {@link #launch} function in. Defaults to the Application
      * instance.
      */
     scope: undefined,
 
-<span id='Ext-app.Application-cfg-enableQuickTips'>    /**
-</span>     * @cfg {Boolean} enableQuickTips True to automatically set up Ext.tip.QuickTip support (defaults to true)
+<span id='Ext-app-Application-cfg-enableQuickTips'>    /**
+</span>     * @cfg {Boolean} enableQuickTips True to automatically set up Ext.tip.QuickTip support.
      */
     enableQuickTips: true,
 
-<span id='Ext-app.Application-cfg-defaultUrl'>    /**
-</span>     * @cfg {String} defaultUrl When the app is first loaded, this url will be redirected to. Defaults to undefined
+<span id='Ext-app-Application-cfg-defaultUrl'>    /**
+</span>     * @cfg {String} defaultUrl When the app is first loaded, this url will be redirected to.
      */
 
-<span id='Ext-app.Application-cfg-appFolder'>    /**
+<span id='Ext-app-Application-cfg-appFolder'>    /**
 </span>     * @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',
 
-<span id='Ext-app.Application-cfg-autoCreateViewport'>    /**
-</span>     * @cfg {Boolean} autoCreateViewport Automatically loads and instantiates AppName.view.Viewport before firing the launch function.
+<span id='Ext-app-Application-cfg-autoCreateViewport'>    /**
+</span>     * @cfg {Boolean} autoCreateViewport True to automatically load and instantiate AppName.view.Viewport
+     * before firing the launch function.
      */
-    autoCreateViewport: true,
+    autoCreateViewport: false,
 
+<span id='Ext-app-Application-method-constructor'>    /**
+</span>     * 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 &amp;&amp; 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);
     },
 
-<span id='Ext-app.Application-property-launch'>    /**
+<span id='Ext-app-Application-property-launch'>    /**
 </span>     * 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,
 
-<span id='Ext-app.Application-method-onBeforeLaunch'>    /**
+<span id='Ext-app-Application-method-onBeforeLaunch'>    /**
 </span>     * @private
      */
     onBeforeLaunch: function() {
@@ -239,4 +258,6 @@ Ext.define('Ext.app.Application', {
         return Ext.ClassManager.get(view);
     }
 });
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>