/ext-4.1.0_b3/docs/source/Application.html
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 && 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 < 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 < 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 < 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 > 0 && 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>