docs/source/Application.html

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