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

Question

我认为我的问题非常简单，但由于我刚刚开始使用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（头部标记为红色）

有人可以告诉我的代码，使导航栏在底部和头在在同一个窗口顶部？

在此先感谢。

Answer 1

除了一个tabpanel的标签，你也可以添加的东西，这是通过停靠配置选项停靠，这样的：

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