13693261870
2022-09-16 354b3dbfbffb3df45212a2a44dbbf48b4acc2594
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
<!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'
 *                 }
 *             });
 *         }
 *     });
 *
 * 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. The MyApp global will also have a getApplication method to get a reference to
 * the current application:
 *
 *     var app = MyApp.getApplication();
 *
 * 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.
 *
 * # 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() {
 *             ...
 *         }
 *     });
 *
 * 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 [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
 *     });
 *
 * 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
 * application using Sencha Cmd.
 *
 * # Deriving from Ext.app.Application
 *
 * Typically, applications do not derive directly from Ext.app.Application. Rather, the
 * configuration passed to `Ext.application` mimics what you might do in a derived class.
 * In some cases, however, it can be desirable to share logic by using a derived class
 * from `Ext.app.Application`.
 *
 * Derivation works as you would expect, but using the derived class should still be the
 * job of the `Ext.application` method.
 *
 *     Ext.define('MyApp.app.Application', {
 *         extend: 'Ext.app.Application',
 *         name: 'MyApp',
 *         ...
 *     });
 *
 *     Ext.application('MyApp.app.Application');
 *
 * 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', {
    extend: 'Ext.app.Controller',
 
    requires: [
        'Ext.tip.QuickTipManager'
    ],
 
<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. **Application name
     * is mandatory**.
     */
 
<span id='Ext-app-Application-cfg-controllers'>    /**
</span>     * @cfg {String/String[]} controllers
     * Names of controllers that the app uses.
     */
 
<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.
     */
    enableQuickTips: true,
 
<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.
     */
    appFolder: 'app',
    // NOTE - this config has to be processed by Ext.application
 
<span id='Ext-app-Application-cfg-appProperty'>    /**
</span>     * @cfg {String} appProperty
     * The name of a property to be assigned to the main namespace to gain a reference to
     * this application. Can be set to an empty value to prevent the reference from
     * being created
     *
     *     Ext.application({
     *         name: 'MyApp',
     *         appProperty: 'myProp',
     *
     *         launch: function() {
     *             console.log(MyApp.myProp === this);
     *         }
     *     });
     */
    appProperty: 'app',
 
<span id='Ext-app-Application-cfg-namespaces'>    /**
</span>     * @cfg {String/String[]} [namespaces]
     *
     * The list of namespace prefixes used in the application to resolve dependencies
     * like Views and Stores:
     *
     *      Ext.application({
     *          name: 'MyApp',
     *
     *          namespaces: ['Common.code'],
     *
     *          controllers: [ 'Common.code.controller.Foo', 'Bar' ]
     *      });
     *
     *      Ext.define('Common.code.controller.Foo', {
     *          extend: 'Ext.app.Controller',
     *
     *          models: ['Foo'],    // Loads Common.code.model.Foo
     *          views:  ['Bar']     // Loads Common.code.view.Bar
     *      });
     *
     *      Ext.define('MyApp.controller.Bar', {
     *          extend: 'Ext.app.Controller',
     *
     *          models: ['Foo'],    // Loads MyApp.model.Foo
     *          views:  ['Bar']     // Loads MyApp.view.Bar
     *      });
     *
     * You don't need to include main namespace (MyApp), it will be added to the list
     * automatically.
     */
    namespaces: [],
 
<span id='Ext-app-Application-cfg-autoCreateViewport'>    /**
</span>     * @cfg {Boolean} [autoCreateViewport=false]
     * True to automatically load and instantiate AppName.view.Viewport before firing the launch
     * function.
     */
    autoCreateViewport: false,
 
<span id='Ext-app-Application-cfg-paths'>    /**
</span>     * @cfg {Object} paths
     * Additional load paths to add to Ext.Loader.
     * See {@link Ext.Loader#paths} config for more details.
     */
    paths: null,
    
<span id='Ext-app-Application-method-onClassExtended'>    onClassExtended: function(cls, data, hooks) {
</span>        var Controller = Ext.app.Controller,
            proto = cls.prototype,
            requires = [],
            onBeforeClassCreated, paths, namespace, ns, appFolder;
        
        // Ordinary inheritance does not work here so we collect
        // necessary data from current class data and its superclass
        namespace = data.name      || cls.superclass.name;
        appFolder = data.appFolder || cls.superclass.appFolder;
        
        if (namespace) {
            data.$namespace = namespace;
            Ext.app.addNamespaces(namespace);
        }
 
        if (data.namespaces) {
            Ext.app.addNamespaces(data.namespaces);
        }
 
        if (!data['paths processed']) {
            if (namespace &amp;&amp; appFolder) {
                Ext.Loader.setPath(namespace, appFolder);
            }
            
            paths = data.paths;
 
            if (paths) {
                for (ns in paths) {
                    if (paths.hasOwnProperty(ns)) {
                        Ext.Loader.setPath(ns, paths[ns]);
                    }
                }
            }
        }
        else {
            delete data['paths processed'];
        }
 
        if (data.autoCreateViewport) {
            //&lt;debug&gt;
            if (!namespace) {
                Ext.Error.raise(&quot;[Ext.app.Application] Can't resolve namespace for &quot; +
                                data.$className + &quot;, did you forget to specify 'name' property?&quot;);
            }
            //&lt;/debug&gt;
            
            Controller.processDependencies(proto, requires, namespace, 'view', ['Viewport']);
        }
 
        // Any &quot;requires&quot; also have to be processed before we fire up the App instance.
        if (requires.length) {
            onBeforeClassCreated = hooks.onBeforeCreated;
 
            hooks.onBeforeCreated = function(cls, data) {
                var args = Ext.Array.clone(arguments);
                
                Ext.require(requires, function () {
                    return onBeforeClassCreated.apply(this, args);
                });
            };
        }
    },
 
<span id='Ext-app-Application-method-constructor'>    /**
</span>     * Creates new Application.
     * @param {Object} [config] Config object.
     */
    constructor: function(config) {
        var me = this;
 
        //&lt;debug&gt;
        if (Ext.isEmpty(me.name)) {
            Ext.Error.raise(&quot;[Ext.app.Application] Name property is required&quot;);
        }
        //&lt;/debug&gt;
 
        me.callParent(arguments);
 
        me.doInit(me);
 
        me.initNamespace();
        me.initControllers();
        me.onBeforeLaunch();
        
        me.finishInitControllers();
    },
 
<span id='Ext-app-Application-method-initNamespace'>    initNamespace: function() {
</span>        var me = this,
            appProperty = me.appProperty,
            ns;
 
        ns = Ext.namespace(me.name);
 
        if (ns) {
            ns.getApplication = function() {
                return me;
            };
 
            if (appProperty) {
                if (!ns[appProperty]) {
                    ns[appProperty] = me;
                }
                //&lt;debug&gt;
                else if (ns[appProperty] !== me) {
                    Ext.log.warn('An existing reference is being overwritten for ' + name + '.' + appProperty +
                        '. See the appProperty config.'
                    );
                }
                //&lt;/debug&gt;
            }
        }
    },
 
<span id='Ext-app-Application-method-initControllers'>    initControllers: function() {
</span>        var me = this,
            controllers = Ext.Array.from(me.controllers);
 
        me.controllers = new Ext.util.MixedCollection();
 
        for (var i = 0, ln = controllers.length; i &lt; ln; i++) {
            me.getController(controllers[i]);
        }
    },
    
<span id='Ext-app-Application-method-finishInitControllers'>    finishInitControllers: function() {
</span>        var me = this,
            controllers, i, l;
        
        controllers = me.controllers.getRange();
        
        for (i = 0, l = controllers.length; i &lt; l; i++) {
            controllers[i].finishInit(me);
        }
    },
 
<span id='Ext-app-Application-method-launch'>    /**
</span>     * @method
     * @template
     * 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.
     * @param {String} profile The detected application profile
     * @return {Boolean} By default, the Application will dispatch to the configured startup controller and
     * action immediately after running the launch function. Return false to prevent this behavior.
     */
    launch: Ext.emptyFn,
 
<span id='Ext-app-Application-method-onBeforeLaunch'>    /**
</span>     * @private
     */
    onBeforeLaunch: function() {
        var me = this,
            controllers, c, cLen, controller;
 
        if (me.enableQuickTips) {
            me.initQuickTips();
        }
 
        if (me.autoCreateViewport) {
            me.initViewport();
        }
 
        me.launch.call(me.scope || me);
        me.launched = true;
        me.fireEvent('launch', me);
 
        controllers = me.controllers.items;
        cLen        = controllers.length;
 
        for (c = 0; c &lt; cLen; c++) {
            controller = controllers[c];
            controller.onLaunch(me);
        }
    },
 
<span id='Ext-app-Application-method-getModuleClassName'>    getModuleClassName: function(name, kind) {
</span>        return Ext.app.Controller.getFullName(name, kind, this.name).absoluteName;
    },
 
<span id='Ext-app-Application-method-initQuickTips'>    initQuickTips: function() {
</span>        Ext.tip.QuickTipManager.init();
    },
 
<span id='Ext-app-Application-method-initViewport'>    initViewport: function() {
</span>        var viewport = this.getView('Viewport');
 
        if (viewport) {
            viewport.create();
        }
    },
 
<span id='Ext-app-Application-method-getController'>    getController: function(name) {
</span>        var me          = this,
            controllers = me.controllers,
            className, controller;
 
        controller = controllers.get(name);
 
        if (!controller) {
            className  = me.getModuleClassName(name, 'controller');
 
            controller = Ext.create(className, {
                application: me,
                id:          name
            });
 
            controllers.add(controller);
 
            if (me._initialized) {
                controller.doInit(me);
            }
        }
 
        return controller;
    },
 
<span id='Ext-app-Application-method-getApplication'>    getApplication: function() {
</span>        return this;
    }
});
</pre>
</body>
</html>