X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/app/Application.js diff --git a/src/app/Application.js b/src/app/Application.js index 9dbc85b0..b4694656 100644 --- a/src/app/Application.js +++ b/src/app/Application.js @@ -13,12 +13,9 @@ If you are unsure which license is appropriate for your use, please contact the */ /** - * @class Ext.app.Application - * @extend Ext.app.Controller - * * 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() { @@ -29,54 +26,56 @@ If you are unsure which license is appropriate for your use, please contact the * }); * } * }); - * + * * 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 - * + * + * # 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 - 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 + * 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 + * 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](#/guide/application_architecture). - * + * [application architecture guide][mvc]. + * + * [mvc]: #!/guide/application_architecture + * * @docauthor Ed Spencer */ Ext.define('Ext.app.Application', { @@ -103,30 +102,29 @@ Ext.define('Ext.app.Application', { scope: undefined, /** - * @cfg {Boolean} enableQuickTips True to automatically set up Ext.tip.QuickTip support (defaults to true) + * @cfg {Boolean} enableQuickTips True to automatically set up Ext.tip.QuickTip support. */ enableQuickTips: true, /** - * @cfg {String} defaultUrl When the app is first loaded, this url will be redirected to. Defaults to undefined + * @cfg {String} defaultUrl When the app is first loaded, this url will be redirected to. */ /** * @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. - * Defaults to 'app' */ appFolder: 'app', /** * @cfg {Boolean} autoCreateViewport True to automatically load and instantiate AppName.view.Viewport - * before firing the launch function (defaults to false). + * before firing the launch function. */ autoCreateViewport: false, /** * Creates new Application. - * @param {Object} config (optional) Config object. + * @param {Object} [config] Config object. */ constructor: function(config) { config = config || {};