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 out to discuss what routing actually is.

Rootin-Tootin

There's a pretty comprehensive description of routing in the Ext JS Guides, but let's cover it in brief here anyway. Routing allows you to keep the application's state in the page URL via the URL's hash (the hash is everything after the # symbol in a URL). For example:

http://localhost/#banana

This shows us we're on a page about bananas. Likewise, look at the following example:

http://localhost/#cars/56

This shows that we're on a page about car number 56. The beauty of using the hash is that it can be manipulated with JavaScript without reloading the page. Also, any change made to the hash symbol will be remembered by the browser's history. This means that we can navigate around our application and use the back button to retrace our steps. It also means that if we can bookmark a specific page in the application when it reloads the app, it will navigate to the state specified in the hash symbol.

Back to business

How do we implement routes in the Instrumatics app? The first step is to actually define a route as follows:

routes: { ':viewReference: 'onNavigate' }

The first part is the hash we're trying to match. Nothing's been specified apart from :viewReference, so in this case, everything in the hash symbol gets captured and passed on to a method called onNavigate. The name of the :viewReference token is arbitrary, in this it doesn't affect anything else, but in more complex routes, it's useful to name it in a descriptive way.

What are we trying to achieve here? When the hash symbol changes, we want to detect it and redirect the user to the correct page. The route definition does the detection part, so now let's look at how we move the user to the right page:

onNavigate: function(viewReference) {
    var view = this.getView();
    view.setActiveTab(view.lookupReference(viewReference));
}

The route definition means that all matching routes will be consumed by onNavigate. In this method, we can assume that the token passed in is a valid reference to a component on the view controller's view, so we just lookup the component using this reference and set it as the active tab on the "main" view.

We're missing something though, that is, how does the hash get set in the first place?

Route to nowhere

In the listen configuration for the view controller, we handle the "main" tab panel's tabchange event with the onTabChange method. This grabs the reference config from the tab the user is changing to and passes it to the view controller's redirectTo method:

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

The redirectTo method simply changes the hash in the URL, in this case, to the reference of the new component. It's a simple approach that gives us a powerful way to improve the user experience.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset