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

Question

我认为我的问题很简单，但由于我刚刚开始使用 Sencha Touch 进​​行开发，所以我不知道该怎么做。

无论如何，我想创建一个带有标题、列表和导航栏的用户界面。我已经成功创建了列表和导航栏，但我正在努力创建标题。这就是我的代码目前的样子:

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(标题标记为红色)

有人可以向我展示在同一窗口中将导航栏置于底部并将标题置于顶部的代码吗？

提前致谢。

Answer 1

除了选项卡面板的选项卡之外，您还可以添加通过停靠配置选项停靠的项目，如下所示:

    ...
    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'
        }]
    }]