docs/source/Application.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-app-Application'>/**
  19 </span> * @class Ext.app.Application
  20  * @extend Ext.app.Controller
  21  *
  22  * Represents an Ext JS 4 application, which is typically a single page app using a {@link Ext.container.Viewport Viewport}.
  23  * A typical Ext.app.Application might look like this:
  24  *
  25  *     Ext.application({
  26  *         name: 'MyApp',
  27  *         launch: function() {
  28  *             Ext.create('Ext.container.Viewport', {
  29  *                 items: {
  30  *                     html: 'My App'
  31  *                 }
  32  *             });
  33  *         }
  34  *     });
  35  *
  36  * This does several things. First it creates a global variable called 'MyApp' - all of your Application's classes (such
  37  * as its Models, Views and Controllers) will reside under this single namespace, which drastically lowers the chances
  38  * of colliding global variables.
  39  *
  40  * When the page is ready and all of your JavaScript has loaded, your Application's {@link #launch} function is called,
  41  * at which time you can run the code that starts your app. Usually this consists of creating a Viewport, as we do in
  42  * the example above.
  43  *
  44  * &lt;u&gt;Telling Application about the rest of the app&lt;/u&gt;
  45  *
  46  * Because an Ext.app.Application represents an entire app, we should tell it about the other parts of the app - namely
  47  * the Models, Views and Controllers that are bundled with the application. Let's say we have a blog management app; we
  48  * might have Models and Controllers for Posts and Comments, and Views for listing, adding and editing Posts and Comments.
  49  * Here's how we'd tell our Application about all these things:
  50  *
  51  *     Ext.application({
  52  *         name: 'Blog',
  53  *         models: ['Post', 'Comment'],
  54  *         controllers: ['Posts', 'Comments'],
  55  *
  56  *         launch: function() {
  57  *             ...
  58  *         }
  59  *     });
  60  *
  61  * Note that we didn't actually list the Views directly in the Application itself. This is because Views are managed by
  62  * Controllers, so it makes sense to keep those dependencies there. The Application will load each of the specified
  63  * Controllers using the pathing conventions laid out in the &lt;a href=&quot;../guide/application_architecture&quot;&gt;application
  64  * architecture guide&lt;/a&gt; - in this case expecting the controllers to reside in app/controller/Posts.js and
  65  * app/controller/Comments.js. In turn, each Controller simply needs to list the Views it uses and they will be
  66  * automatically loaded. Here's how our Posts controller like be defined:
  67  *
  68  *     Ext.define('MyApp.controller.Posts', {
  69  *         extend: 'Ext.app.Controller',
  70  *         views: ['posts.List', 'posts.Edit'],
  71  *
  72  *         //the rest of the Controller here
  73  *     });
  74  *
  75  * Because we told our Application about our Models and Controllers, and our Controllers about their Views, Ext JS will
  76  * automatically load all of our app files for us. This means we don't have to manually add script tags into our html
  77  * files whenever we add a new class, but more importantly it enables us to create a minimized build of our entire
  78  * application using the Ext JS 4 SDK Tools.
  79  *
  80  * For more information about writing Ext JS 4 applications, please see the
  81  * [application architecture guide](#/guide/application_architecture).
  82  *
  83  * @docauthor Ed Spencer
  84  */
  85 Ext.define('Ext.app.Application', {
  86     extend: 'Ext.app.Controller',
  87
  88     requires: [
  89         'Ext.ModelManager',
  90         'Ext.data.Model',
  91         'Ext.data.StoreManager',
  92         'Ext.tip.QuickTipManager',
  93         'Ext.ComponentManager',
  94         'Ext.app.EventBus'
  95     ],
  96
  97 <span id='Ext-app-Application-cfg-name'>    /**
  98 </span>     * @cfg {String} name The name of your application. This will also be the namespace for your views, controllers
  99      * models and stores. Don't use spaces or special characters in the name.
 100      */
 101
 102 <span id='Ext-app-Application-cfg-scope'>    /**
 103 </span>     * @cfg {Object} scope The scope to execute the {@link #launch} function in. Defaults to the Application
 104      * instance.
 105      */
 106     scope: undefined,
 107
 108 <span id='Ext-app-Application-cfg-enableQuickTips'>    /**
 109 </span>     * @cfg {Boolean} enableQuickTips True to automatically set up Ext.tip.QuickTip support (defaults to true)
 110      */
 111     enableQuickTips: true,
 112
 113 <span id='Ext-app-Application-cfg-defaultUrl'>    /**
 114 </span>     * @cfg {String} defaultUrl When the app is first loaded, this url will be redirected to. Defaults to undefined
 115      */
 116
 117 <span id='Ext-app-Application-cfg-appFolder'>    /**
 118 </span>     * @cfg {String} appFolder The path to the directory which contains all application's classes.
 119      * This path will be registered via {@link Ext.Loader#setPath} for the namespace specified in the {@link #name name} config.
 120      * Defaults to 'app'
 121      */
 122     appFolder: 'app',
 123
 124 <span id='Ext-app-Application-cfg-autoCreateViewport'>    /**
 125 </span>     * @cfg {Boolean} autoCreateViewport True to automatically load and instantiate AppName.view.Viewport
 126      * before firing the launch function (defaults to false).
 127      */
 128     autoCreateViewport: false,
 129
 130 <span id='Ext-app-Application-method-constructor'>    /**
 131 </span>     * Creates new Application.
 132      * @param {Object} config (optional) Config object.
 133      */
 134     constructor: function(config) {
 135         config = config || {};
 136         Ext.apply(this, config);
 137
 138         var requires = config.requires || [];
 139
 140         Ext.Loader.setPath(this.name, this.appFolder);
 141
 142         if (this.paths) {
 143             Ext.Object.each(this.paths, function(key, value) {
 144                 Ext.Loader.setPath(key, value);
 145             });
 146         }
 147
 148         this.callParent(arguments);
 149
 150         this.eventbus = Ext.create('Ext.app.EventBus');
 151
 152         var controllers = Ext.Array.from(this.controllers),
 153             ln = controllers &amp;&amp; controllers.length,
 154             i, controller;
 155
 156         this.controllers = Ext.create('Ext.util.MixedCollection');
 157
 158         if (this.autoCreateViewport) {
 159             requires.push(this.getModuleClassName('Viewport', 'view'));
 160         }
 161
 162         for (i = 0; i &lt; ln; i++) {
 163             requires.push(this.getModuleClassName(controllers[i], 'controller'));
 164         }
 165
 166         Ext.require(requires);
 167
 168         Ext.onReady(function() {
 169             for (i = 0; i &lt; ln; i++) {
 170                 controller = this.getController(controllers[i]);
 171                 controller.init(this);
 172             }
 173
 174             this.onBeforeLaunch.call(this);
 175         }, this);
 176     },
 177
 178     control: function(selectors, listeners, controller) {
 179         this.eventbus.control(selectors, listeners, controller);
 180     },
 181
 182 <span id='Ext-app-Application-property-launch'>    /**
 183 </span>     * Called automatically when the page has completely loaded. This is an empty function that should be
 184      * overridden by each application that needs to take action on page load
 185      * @property launch
 186      * @type Function
 187      * @param {String} profile The detected {@link #profiles application profile}
 188      * @return {Boolean} By default, the Application will dispatch to the configured startup controller and
 189      * action immediately after running the launch function. Return false to prevent this behavior.
 190      */
 191     launch: Ext.emptyFn,
 192
 193 <span id='Ext-app-Application-method-onBeforeLaunch'>    /**
 194 </span>     * @private
 195      */
 196     onBeforeLaunch: function() {
 197         if (this.enableQuickTips) {
 198             Ext.tip.QuickTipManager.init();
 199         }
 200
 201         if (this.autoCreateViewport) {
 202             this.getView('Viewport').create();
 203         }
 204
 205         this.launch.call(this.scope || this);
 206         this.launched = true;
 207         this.fireEvent('launch', this);
 208
 209         this.controllers.each(function(controller) {
 210             controller.onLaunch(this);
 211         }, this);
 212     },
 213
 214     getModuleClassName: function(name, type) {
 215         var namespace = Ext.Loader.getPrefix(name);
 216
 217         if (namespace.length &gt; 0 &amp;&amp; namespace !== name) {
 218             return name;
 219         }
 220
 221         return this.name + '.' + type + '.' + name;
 222     },
 223
 224     getController: function(name) {
 225         var controller = this.controllers.get(name);
 226
 227         if (!controller) {
 228             controller = Ext.create(this.getModuleClassName(name, 'controller'), {
 229                 application: this,
 230                 id: name
 231             });
 232
 233             this.controllers.add(controller);
 234         }
 235
 236         return controller;
 237     },
 238
 239     getStore: function(name) {
 240         var store = Ext.StoreManager.get(name);
 241
 242         if (!store) {
 243             store = Ext.create(this.getModuleClassName(name, 'store'), {
 244                 storeId: name
 245             });
 246         }
 247
 248         return store;
 249     },
 250
 251     getModel: function(model) {
 252         model = this.getModuleClassName(model, 'model');
 253
 254         return Ext.ModelManager.getModel(model);
 255     },
 256
 257     getView: function(view) {
 258         view = this.getModuleClassName(view, 'view');
 259
 260         return Ext.ClassManager.get(view);
 261     }
 262 });
 263 </pre>
 264 </body>
 265 </html>