Создайте заголовок приложения 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

В дополнении к вкладкам 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' 
     }] 
    }]