Application.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  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. */
  83. Ext.define('Ext.app.Application', {
  84. extend: 'Ext.app.Controller',
  85. requires: [
  86. 'Ext.ModelManager',
  87. 'Ext.data.Model',
  88. 'Ext.data.StoreManager',
  89. 'Ext.tip.QuickTipManager',
  90. 'Ext.ComponentManager',
  91. 'Ext.app.EventBus'
  92. ],
  93. <span id='Ext-app-Application-cfg-name'> /**
  94. </span> * @cfg {String} name
  95. * The name of your application. This will also be the namespace for your views, controllers
  96. * models and stores. Don't use spaces or special characters in the name.
  97. */
  98. <span id='Ext-app-Application-cfg-controllers'> /**
  99. </span> * @cfg {String[]} controllers
  100. * Names of controllers that the app uses.
  101. */
  102. <span id='Ext-app-Application-cfg-scope'> /**
  103. </span> * @cfg {Object} scope
  104. * The scope to execute the {@link #launch} function in. Defaults to the Application instance.
  105. */
  106. scope: undefined,
  107. <span id='Ext-app-Application-cfg-enableQuickTips'> /**
  108. </span> * @cfg {Boolean} enableQuickTips
  109. * True to automatically set up Ext.tip.QuickTip support.
  110. */
  111. enableQuickTips: true,
  112. <span id='Ext-app-Application-cfg-appFolder'> /**
  113. </span> * @cfg {String} appFolder
  114. * The path to the directory which contains all application's classes.
  115. * This path will be registered via {@link Ext.Loader#setPath} for the namespace specified
  116. * in the {@link #name name} config.
  117. */
  118. appFolder: 'app',
  119. <span id='Ext-app-Application-cfg-autoCreateViewport'> /**
  120. </span> * @cfg {Boolean} autoCreateViewport
  121. * True to automatically load and instantiate AppName.view.Viewport before firing the launch function.
  122. */
  123. autoCreateViewport: false,
  124. <span id='Ext-app-Application-cfg-paths'> /**
  125. </span> * @cfg {Object} paths
  126. * Additional load paths to add to Ext.Loader.
  127. * See {@link Ext.Loader#paths} config for more details.
  128. */
  129. <span id='Ext-app-Application-method-constructor'> /**
  130. </span> * Creates new Application.
  131. * @param {Object} [config] Config object.
  132. */
  133. constructor: function(config) {
  134. config = config || {};
  135. Ext.apply(this, config);
  136. var me = this,
  137. requires = config.requires || [],
  138. controllers, ln, i, controller,
  139. paths, path, ns;
  140. Ext.Loader.setPath(me.name, me.appFolder);
  141. if (me.paths) {
  142. paths = me.paths;
  143. for (ns in paths) {
  144. if (paths.hasOwnProperty(ns)) {
  145. path = paths[ns];
  146. Ext.Loader.setPath(ns, path);
  147. }
  148. }
  149. }
  150. me.callParent(arguments);
  151. me.eventbus = new Ext.app.EventBus;
  152. controllers = Ext.Array.from(me.controllers);
  153. ln = controllers &amp;&amp; controllers.length;
  154. me.controllers = new Ext.util.MixedCollection();
  155. if (me.autoCreateViewport) {
  156. requires.push(me.getModuleClassName('Viewport', 'view'));
  157. }
  158. for (i = 0; i &lt; ln; i++) {
  159. requires.push(me.getModuleClassName(controllers[i], 'controller'));
  160. }
  161. Ext.require(requires);
  162. Ext.onReady(function() {
  163. me.init(me);
  164. for (i = 0; i &lt; ln; i++) {
  165. controller = me.getController(controllers[i]);
  166. controller.init(me);
  167. }
  168. me.onBeforeLaunch.call(me);
  169. }, me);
  170. },
  171. control: function(selectors, listeners, controller) {
  172. this.eventbus.control(selectors, listeners, controller);
  173. },
  174. <span id='Ext-app-Application-method-launch'> /**
  175. </span> * @method
  176. * @template
  177. * Called automatically when the page has completely loaded. This is an empty function that should be
  178. * overridden by each application that needs to take action on page load.
  179. * @param {String} profile The detected application profile
  180. * @return {Boolean} By default, the Application will dispatch to the configured startup controller and
  181. * action immediately after running the launch function. Return false to prevent this behavior.
  182. */
  183. launch: Ext.emptyFn,
  184. <span id='Ext-app-Application-method-onBeforeLaunch'> /**
  185. </span> * @private
  186. */
  187. onBeforeLaunch: function() {
  188. var me = this,
  189. controllers, c, cLen, controller;
  190. if (me.enableQuickTips) {
  191. Ext.tip.QuickTipManager.init();
  192. }
  193. if (me.autoCreateViewport) {
  194. me.getView('Viewport').create();
  195. }
  196. me.launch.call(this.scope || this);
  197. me.launched = true;
  198. me.fireEvent('launch', this);
  199. controllers = me.controllers.items;
  200. cLen = controllers.length;
  201. for (c = 0; c &lt; cLen; c++) {
  202. controller = controllers[c];
  203. controller.onLaunch(this);
  204. }
  205. },
  206. getModuleClassName: function(name, module) {
  207. // Deciding if a class name must be qualified:
  208. // 1 - if the name doesn't contains at least one dot, we must definitely qualify it
  209. // 2 - the name may be a qualified name of a known class, but:
  210. // 2.1 - in runtime, the loader may not know the class - specially in production - so we must check the class manager
  211. // 2.2 - in build time, the class manager may not know the class, but the loader does, so we check the second one
  212. // (the loader check assures it's really a class, and not a namespace, so we can have 'Books.controller.Books',
  213. // and request for a controller called Books will not be underqualified)
  214. if (name.indexOf('.') !== -1 &amp;&amp; (Ext.ClassManager.isCreated(name) || Ext.Loader.isAClassNameWithAKnownPrefix(name))) {
  215. return name;
  216. } else {
  217. return this.name + '.' + module + '.' + name;
  218. }
  219. },
  220. getController: function(name) {
  221. var controller = this.controllers.get(name);
  222. if (!controller) {
  223. controller = Ext.create(this.getModuleClassName(name, 'controller'), {
  224. application: this,
  225. id: name
  226. });
  227. this.controllers.add(controller);
  228. }
  229. return controller;
  230. },
  231. getStore: function(name) {
  232. var store = Ext.StoreManager.get(name);
  233. if (!store) {
  234. store = Ext.create(this.getModuleClassName(name, 'store'), {
  235. storeId: name
  236. });
  237. }
  238. return store;
  239. },
  240. getModel: function(model) {
  241. model = this.getModuleClassName(model, 'model');
  242. return Ext.ModelManager.getModel(model);
  243. },
  244. getView: function(view) {
  245. view = this.getModuleClassName(view, 'view');
  246. return Ext.ClassManager.get(view);
  247. }
  248. });
  249. </pre>
  250. </body>
  251. </html>