The data fundamentals are in place, so let's look at a feature we'll be using for the first time in this application: the Controller. Not a view controller this time, but the over-arching application controller we talked about in our design:

// app/controller/Root.js
Ext.define('Postcard.controller.Root', {
    extend: 'Ext.app.Controller',

    routes: {
        'home': 'onHome',
        '': 'checkLogin'
    },

    onLaunch: function() {
        this.checkLogin();
    },

    checkLogin: function() {
        if(!window.localStorage.getItem('loggedin')) {
            this.loginWindow = Ext.create('Postcard.view.login.Login'),
        } else {
            Ext.create('Postcard.view.main.Main'),
        }
    },

    onHome: function() {
        if(this.loginWindow) {
            this.loginWindow.destroy();
        }

        this.checkLogin();
    }
});

In previous examples, app/Application.js has been responsible for creating the viewport that represents the main view of the application. In this case, the root controller takes on this role. We override its onLaunch method to detect whether the user is logged in, regardless of the route they are on. It also specifies the default URL for the application (just an empty string) and again checks for a valid login.

When a valid login is detected, the main view is shown, otherwise the login is shown. This is a super-simple mechanism to create a crude login system.