Class Ext.Application

Represents a Sencha Application. Most Applications consist of at least the application's name and a launch function:

new Ext.Application({
    name: 'MyApp',

    launch: function() {
        this.viewport = new Ext.Panel({
            fullscreen: true,
            
            id    : 'mainPanel',
            layout: 'card',
            items : [
                {
                    html: 'Welcome to My App!'
                }
            ]
        });
    }
});

Instantiating a new application automatically creates a global variable using the configured name property and sets up namespaces for views, stores, models and controllers within the app:

//this code is run internally automatically when creating the app
Ext.ns('MyApp', 'MyApp.views', 'MyApp.stores', 'MyApp.models', 'MyApp.controllers');

The launch function usually creates the Application's Viewport and runs any actions the Application needs to perform when it boots up. The launch function is only expected to be run once.

Routes and history support

Sencha Applications provide in-app deep linking and history support, allowing your users both to use the back button inside your application and to refresh the page and come back to the same screen even after navigating. In-app history support relies on the Routing engine, which maps urls to controller/action pairs. Here's an example route definition:

//Note the # in the url examples below
Ext.Router.draw(function(map) {
    //maps the url http://mydomain.com/#dashboard to the home controller's index action
    map.connect('dashboard', {controller: 'home', action: 'index'});

    //fallback route - would match routes like http://mydomain.com/#users/list to the 'users' controller's
    //'list' action
    map.connect(':controller/:action');
});

If you generated your Sencha app using the Sencha Command application generator script, you'll see this file is already present in your application's app/routes.js file. History-driven apps can specify the defaultUrl configuration option, which will dispatch to that url if no url is currently set:

new Ext.Application({
    name: 'MyApp',
    defaultUrl: 'dashboard'
});

Application profiles

Applications support multiple app profiles and reconfigure itself accordingly. Here we set up an Application with 3 profiles - one if the device is a phone, one for tablets in landscape orientation and one for tablets in portrait orientation:

new Ext.Application({
    name: 'MyApp',

    profiles: {
        phone: function() {
            return Ext.is.Phone;
        },
        tabletPortrait: function() {
            return Ext.is.Tablet && Ext.orientation == 'portrait';
        },
        tabletLandscape: function() {
            return Ext.is.Tablet && Ext.orientation == 'landscape';
        }
    }
});

When the Application checks its list of profiles, the first function that returns true becomes the current profile. The Application will normally automatically detect when a profile change has occurred (e.g. if a tablet is rotated from portrait to landscape mode) and fire the profilechange event. It will also by default inform all Components on the page that the current profile has changed by calling their setProfile functions. The setProfile function is left as an empty function for you to implement if your component needs to react to different device/application profiles.

The current profile can be found using getProfile. If the Application does not correctly detect device profile changes, calling the determineProfile function will force it to re-check.