With a view to a controller

In this application, we have a "main" view, which acts as the application's viewport, and an associated controller, which deals with user interactions with this viewport and handles routing. Let's look at the UI portion first: view:

// app/view/main/Main.js
Ext.define('Instrumatics.view.main.Main', {
    extend: 'Ext.tab.Panel',

    requires: [
        'Instrumatics.view.dashboard.Dashboard',
        'Instrumatics.view.web.Web',
        'Instrumatics.view.web.Sql',
    ],

    xtype: 'app-main',
    controller: 'main-main',

    header: {
        title: {
            text: 'Instrumatics', padding: 20
        }
    },

    tabPosition: 'left',
    tabRotation: 0,

    items: [
        { xtype: 'dashboard', title: 'Dashboard', reference: 'dash' },
        { xtype: 'web-logs', title: 'Web', reference: 'web' },
        { xtype: 'sql-logs', title: 'SQL', reference: 'sql' }
    ]
});

There are a few interesting bits in this code. We use the header config option to give...