Why is my Ext.TabBar enormus?

Why is my Ext.TabBar display so big? It is about 1/3 of the iPhone screen and only one button is visible. I know I just missed some parameter in here.

Ext.setup({ 

    icon: 'icon.png',
    glossOnIcon: false,
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    onReady: function() {           

var bar = new Ext.TabBar({
                dock : 'top',
                ui   : 'dark',
                items: [
                    {
                        text: '1st Button',
                        cls: 'card1',
                        handler: requestNews
                    },
                    {
                        text: '2st Button',
                        cls: 'card2',
                        handler: requestAbout
                    },
                    {
                        text: '3nd Button',
                        cls: 'card3',
                        handler: requestForm
                    }
                ]
            });

            var myPanel = new Ext.Panel({
                dockedItems: [bar],
                fullscreen : true,
                html       : 'Test Panel',
开发者_如何学JAVA            });

        }
    });

Looks good to me (screenshot attached). Joel when I have problems with layout I use Weinre , once you've got it set up you can click through the Dom and see the styles and dimensions, etc.

Perhaps you left something out of your example above that is effecting the layout?