Ext JS Application Development Blueprints

The main view controller

There isn't a lot of code in this view controller, but the functionality it enables is very important. Let's take a look:

// app/view/main/MainController.js
Ext.define('Instrumatics.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main-main',
    
    routes: {
        ':controller': 'onNavigate'
    },

    listen: {
        component: {
            'tabpanel': {
                tabchange: 'onTabChange'
            }
        }
    },

    onTabChange: function(tab, newCmp, oldCmp) {
        this.redirectTo(newCmp.getReference());
    },

    onNavigate: function(controller) {
        var view = this.getView();

        view.setActiveTab(view.lookupReference(controller));
    }
});

Not much code, to be sure, but a lot going on. This is the part of the application that deals with routing, so let's take a bit of time ...