The initial application's MVC structure

After preparing some debugging tools, we can move back to our "Travelly" application development itself.

We should organize our views, controllers, and models. Let's start with views.

Views

Earlier, when we created a basic Sencha Touch application, we described the launch method in the main entry point:

launch: function() {
    Ext.fly('appLoadingIndicator').destroy();
    Ext.Viewport.add(Ext.create('Travelly.view.Main'));
}

This code destroys the loading indicator and adds our Main view to the viewport. A loading indicator displays the process when the application is not ready yet and initiating all the components. This is pretty clear, right? By default, the Main view extends the Ext.tab.Panel Sencha component.

Tab panels are a great way to allow the user to switch between several pages that are all full screen. Each component in the tab panel gets its own tab, which shows the component when tapped on it. Tabs can be positioned at the top or the bottom...