Clear Up
SharpKit Reference

Application Class

Namespace: Ext.app

Base Types

System.Object

Constructors

Name Description
Application()
Application(ApplicationConfig)
Application(object) Creates new Application. @param {Object} config (optional) Config object.

Properties

Name Description
alternateClassName Represents a Sencha Touch application, which is typically a single page app using a {@link Ext.viewport.Viewport Viewport}. A typical Ext.app.Application might look like this: * Ext.application({ name: 'MyApp', launch: function() { Ext.create('Ext.Panel', { fullscreen: true, html: 'Hello World' }); } }); * 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 upcoming 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 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, Sencha Touch 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. ## Further Reading Applications are usually populated with Models, Views and Controllers. We're working on a set of guides around MVC but in the meantime you can find more background information at: * {@link Ext.app.Controller} * {@link Ext.data.Model} * [Component (View) Guide](#!/guide/components) * @docauthor Ed Spencer
appFolder @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'
autoCreateViewport @cfg {Boolean} autoCreateViewport True to automatically load and instantiate AppName.view.Viewport before firing the launch function (defaults to false).
enableQuickTips @cfg {Boolean} enableQuickTips True to automatically set up Ext.tip.QuickTip support (defaults to true)
extend Represents a Sencha Touch application, which is typically a single page app using a {@link Ext.viewport.Viewport Viewport}. A typical Ext.app.Application might look like this: * Ext.application({ name: 'MyApp', launch: function() { Ext.create('Ext.Panel', { fullscreen: true, html: 'Hello World' }); } }); * 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 upcoming 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 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, Sencha Touch 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. ## Further Reading Applications are usually populated with Models, Views and Controllers. We're working on a set of guides around MVC but in the meantime you can find more background information at: * {@link Ext.app.Controller} * {@link Ext.data.Model} * [Component (View) Guide](#!/guide/components) * @docauthor Ed Spencer
© Copyright 2005-2011 SharpKit. All rights reserved.