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 us fine control over the panel's header, allowing us to add some formatting to the title.

We then change the default configuration of the panel's tabs to put them on the left-hand side of the screen (as opposed to the top of the screen). As tabs on the left-hand side default to displaying from top to bottom, we adjust tabRotation too, making them read from left to right. The tab selected by default is automatically the first component in the items array, so we can avoid setting any configuration to stipulate this.

Then, we set out the items that will be included in this tab panel, just the dashboard, the web logs subpage, and the SQL logs subpage, as dictated in our design. The only interesting part of this configuration is the addition of reference for each component and its utility will become clear when we look at the view controller.