Javascript 在Sencha Touch应用程序中创建标题

我想我的问题很简单，但因为我刚刚开始用Sencha Touch开发，所以我不知道该怎么做

无论如何，我想创建一个带有标题、列表和导航栏的UI。我已经设法创建了列表和导航栏，但是我正在努力创建标题。这就是我的代码当前的样子：

Ext.setup ({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,

onReady: function()
{
    var tabpanel = new Ext.TabPanel
    ({
        tabBar: { dock: 'bottom', layout: { pack: 'center' } },
        fullscreen: true,
        ui: 'light',
        cardSwitchAnimation: { type: 'slide', cover: true },
        defaults: { scroll: 'vertical' },
        items: [tabAgora, tabCanais, tabProcurar, tabAlarme]
    });
} });

这是我到目前为止的结果：http://i.imgur.com/zexsf.png

但我想要达到的是这样的目标：http://i.imgur.com/vmOoS.png 标题标记为红色

有人能告诉我在同一个窗口中导航栏在底部，标题在顶部的代码吗

---

提前感谢。

除了选项卡面板的选项卡外，您还可以添加项目，这些项目通过docked config选项固定，如下所示：

    ...
    defaults: { scroll: 'vertical' },
    items: [tabAgora, tabCanais, tabProcurar, tabAlarme, {
        xtype: 'navigationbar'
        docked: 'top',
        title: 'icons',
        items: [{
            align: 'left',
            text: 'Navigation'
        }, {
            align: 'right',
            text: 'Source',
            ui: 'action'
        }]
    }]