Sencha Touch 1 TabBar undersized

Question

I'm writing a Sencha Touch 1.1 MVC app. My view code looks like this

MyApp.views.MainIndexView = Ext.extend(Ext.TabPanel, {
ui: 'light',
cardSwitchAnimation: {
    type: 'slide',
    cover: true
},
initComponent: function() {
    this.topToolbar = new Ext.Toolbar({
        title: 'My App'
    })

    this.temperatureTab = new Ext.Panel({
        title: 'Temperature',
        html: '<h1>Log A Temperature</h1>'
    })

    this.dockedItems = [this.topToolbar];
    this.items = [this.temperatureTab];

    this.tabBar = {
        dock: 'bottom',
        layout: {
            pack: 'center'
        }
    }
    MyApp.views.MainIndexView.superclass.initComponent.call(this);
}
})

The view renders, but the tabBar at the bottom is super small. It makes no sense.

Is there a way to make this normal height without adding icons?

Answer 1

Adding icons was the only way that I found to fix this.