A Sencha Touch tab panel example

The following code shows how I created a tab panel in a Sencha Touch application, with a few important parts highlighted:

Ext.define('RadioMobile.view.MainTabPanel', {
    extend: 'Ext.tab.Panel',

    xtype:  'mainTabPanel',
    alias:  'widget.mainTabPanel',

    requires: [
        'RadioMobile.view.TimeControlsPanel',
        'RadioMobile.view.StationsPanel',
        'RadioMobile.view.StreamsPanel',
        'RadioMobile.view.RecordingsPanel',
        'RadioMobile.view.PodcastsPanel'
    ],

    config: {
        fullscreen : true,
        tabBar: {
            docked: 'bottom',
            layout: {
                pack: 'center'
            }
        }
    },

    initialize: function() {
        this.callParent(arguments);
        // the main panels that will show up in the bottom toolbar
        this.add(Ext.create('RadioMobile.view.TimeControlsPanel'));
        this.add(Ext.create('RadioMobile.view.StationsPanel'));
        this.add(Ext.create('RadioMobile.view.StreamsPanel'));
        this.add(Ext.create('RadioMobile.view.RecordingsPanel'));
        this.add(Ext.create('RadioMobile.view.PodcastsPanel'));
        this.setActiveItem(0);
    }

});

This code results in the following mobile UI, in particular the "tabs" shown at the bottom of the image: