In a previous article I’ve extended the Sencha Touch 1 tab bar component to be used in a MVC structured application. After Sencha Touch 2 was launched some of the readers that liked that solution asked if it could be adapted for the new version. Now that I got the time to focus on this too, I will show you how I used the Tab Bar component in projects developed using Sencha Touch 2.

To use TabBarMvc in version two of Sencha Touch you must follow the next steps:

1. Download TabBarMvc.js and add it to your project in app/view/ folder.

2. Add the component as an item to the viewport view like this:

items: [
    {
        xtype: 'TabBarMvc',
        items: [
            {
                text: 'Home',
                iconCls: 'home',
                route: '', // custom property of the TabBarMvc component
            },
            {
                text: 'About',
                iconCls: 'info',
                route: 'about', // custom property of the TabBarMvc component
            }
        ]
    }
]

You also must add the following line at the top of the viewport file:

Ext.require('App.view.TabBarMvc');

3. Make TabBarMvc aware of the application instance by adding the following line in the app launch method:

Ext.ComponentQuery.query('TabBarMvc')[0].setApp(this);

4. To use the animation parameters sent by the tab bar in your controller actions you can do something like this:

/**
 * home action
 */
home: function (animation) {
    var view = this.getHomeView();

    var anim = Ext.merge({}, this.animation, animation);

    this.getViewport().animateActiveItem(view, anim);
}

If you have defined a route like about/:something, the controller action will look like this:

home: function (something, animation) { ...

The default animation is a slide. To change this, you can set the switchAnimation property of TabBarMvc to a different effect like this:

{
    xtype: 'TabBarMvc',
    switchAnimation: 'pop',
    ...
}

or like this:

{
    xtype: 'TabBarMvc',
    switchAnimation: {
        type: 'slide',
        duration: 400
    },
    ...
}

Note: If your application doesn’t have the name App you’ll have to edit the following line in TabBarMvc.js file to your needs:

Ext.define("App.view.TabBarMvc", {

You can download an example project from here.

If you have questions, suggestions or improvements don’t hesitate to add a comment and let me know about them.

If you liked this post
you can buy me a beer