123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294 |
- <!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.
- *
- * 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 the Ext JS 4 SDK Tools.
- *
- * 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.ModelManager',
- 'Ext.data.Model',
- 'Ext.data.StoreManager',
- 'Ext.tip.QuickTipManager',
- 'Ext.ComponentManager',
- 'Ext.app.EventBus'
- ],
- <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.
- */
- <span id='Ext-app-Application-cfg-controllers'> /**
- </span> * @cfg {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',
- <span id='Ext-app-Application-cfg-autoCreateViewport'> /**
- </span> * @cfg {Boolean} autoCreateViewport
- * 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.
- */
-
- <span id='Ext-app-Application-method-constructor'> /**
- </span> * Creates new Application.
- * @param {Object} [config] Config object.
- */
- constructor: function(config) {
- config = config || {};
- Ext.apply(this, config);
- var me = this,
- requires = config.requires || [],
- controllers, ln, i, controller,
- paths, path, ns;
- Ext.Loader.setPath(me.name, me.appFolder);
- if (me.paths) {
- paths = me.paths;
- for (ns in paths) {
- if (paths.hasOwnProperty(ns)) {
- path = paths[ns];
- Ext.Loader.setPath(ns, path);
- }
- }
- }
- me.callParent(arguments);
- me.eventbus = new Ext.app.EventBus;
- controllers = Ext.Array.from(me.controllers);
- ln = controllers && controllers.length;
- me.controllers = new Ext.util.MixedCollection();
- if (me.autoCreateViewport) {
- requires.push(me.getModuleClassName('Viewport', 'view'));
- }
- for (i = 0; i < ln; i++) {
- requires.push(me.getModuleClassName(controllers[i], 'controller'));
- }
- Ext.require(requires);
- Ext.onReady(function() {
- me.init(me);
- for (i = 0; i < ln; i++) {
- controller = me.getController(controllers[i]);
- controller.init(me);
- }
- me.onBeforeLaunch.call(me);
- }, me);
- },
- control: function(selectors, listeners, controller) {
- this.eventbus.control(selectors, listeners, controller);
- },
- <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) {
- Ext.tip.QuickTipManager.init();
- }
- if (me.autoCreateViewport) {
- me.getView('Viewport').create();
- }
- me.launch.call(this.scope || this);
- me.launched = true;
- me.fireEvent('launch', this);
- controllers = me.controllers.items;
- cLen = controllers.length;
- for (c = 0; c < cLen; c++) {
- controller = controllers[c];
- controller.onLaunch(this);
- }
- },
- getModuleClassName: function(name, module) {
- // Deciding if a class name must be qualified:
- // 1 - if the name doesn't contains at least one dot, we must definitely qualify it
- // 2 - the name may be a qualified name of a known class, but:
- // 2.1 - in runtime, the loader may not know the class - specially in production - so we must check the class manager
- // 2.2 - in build time, the class manager may not know the class, but the loader does, so we check the second one
- // (the loader check assures it's really a class, and not a namespace, so we can have 'Books.controller.Books',
- // and request for a controller called Books will not be underqualified)
- if (name.indexOf('.') !== -1 && (Ext.ClassManager.isCreated(name) || Ext.Loader.isAClassNameWithAKnownPrefix(name))) {
- return name;
- } else {
- return this.name + '.' + module + '.' + name;
- }
- },
- getController: function(name) {
- var controller = this.controllers.get(name);
- if (!controller) {
- controller = Ext.create(this.getModuleClassName(name, 'controller'), {
- application: this,
- id: name
- });
- this.controllers.add(controller);
- }
- return controller;
- },
- getStore: function(name) {
- var store = Ext.StoreManager.get(name);
- if (!store) {
- store = Ext.create(this.getModuleClassName(name, 'store'), {
- storeId: name
- });
- }
- return store;
- },
- getModel: function(model) {
- model = this.getModuleClassName(model, 'model');
- return Ext.ModelManager.getModel(model);
- },
- getView: function(view) {
- view = this.getModuleClassName(view, 'view');
- return Ext.ClassManager.get(view);
- }
- });
- </pre>
- </body>
- </html>
|