<!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 && 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) {
|
//<debug>
|
if (!namespace) {
|
Ext.Error.raise("[Ext.app.Application] Can't resolve namespace for " +
|
data.$className + ", did you forget to specify 'name' property?");
|
}
|
//</debug>
|
|
Controller.processDependencies(proto, requires, namespace, 'view', ['Viewport']);
|
}
|
|
// Any "requires" 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;
|
|
//<debug>
|
if (Ext.isEmpty(me.name)) {
|
Ext.Error.raise("[Ext.app.Application] Name property is required");
|
}
|
//</debug>
|
|
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;
|
}
|
//<debug>
|
else if (ns[appProperty] !== me) {
|
Ext.log.warn('An existing reference is being overwritten for ' + name + '.' + appProperty +
|
'. See the appProperty config.'
|
);
|
}
|
//</debug>
|
}
|
}
|
},
|
|
<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 < 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 < 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 < 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>
|