PageRenderTime 37ms CodeModel.GetById 27ms app.highlight 7ms RepoModel.GetById 1ms app.codeStats 0ms

/ext-4.1.0_b3/docs/source/Application.html

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