sencha touch tabBar中不显示当我添加标题栏

Question

我想创建一个标题栏和一个标签栏正好在它下面的布局。

我知道如何在每个选项卡中分配一个简单的html文本，并且当我使用没有标题栏的选项卡栏时，我使它工作。它如下：

Ext.define('MyThirdApp.view.Feed', { 
extend: 'Ext.TabPanel', 
xtype: 'feedcard', 

config:{ 
    tabBar: { 
     layout: { 
      pack: 'center' 
     } 
    }, 
    defaults: { 
     styleHtmlContent: true 
    }, 

    items: [ 
     { 
      title: 'tab1', 
      html: 'this is tab 1' 
     }, 
     { 
      title: 'tab2', 
      html: 'here is tab2!' 
     }, 
     { 
      title: 'tab3', 
      html: 'here is tab3!' 
     } 
     ] 
    } 
}); 

它工作正常。然后我试图通过定义另外的看法，在它

Ext.define('MyThirdApp.view.Main', { 
fullscreen: true, 
extend: 'Ext.Panel', 
requires: [ 
    'Ext.TitleBar', 
    'MyThirdApp.view.Feed' 
], 

config: { 
    items:[ 
     { 
      xtype: 'titlebar', 
      title: 'The main title', 
     }, 
     {xtype: 'feedcard'} 
    ] 
} 


}); 

加入这个标签栏加在它上面标题栏，它显示了它下面的标签栏的标题栏。即使我点击所有不同的标签，它也不会显示任何html。我不知道为什么会发生这种情况，或者我做错了什么，我尝试使用MyThirdApp.view.Main的layout和extend：属性，将其更改为Container或Panel，但都不起作用。我试着环视Sencha的Kitchensink例子，但是我没有发现代码在他们的标签栏UI源代码中定义了标题栏的一部分。任何帮助将不胜感激，谢谢。

Answer 1

尝试在主视图中添加layout: 'fit'： -

Ext.define('MyThirdApp.view.Main', { 
fullscreen: true, 
extend: 'Ext.Panel', 
requires: [ 
    'Ext.TitleBar', 
    'MyThirdApp.view.Feed' 
], 

config: { 
    layout: 'fit', 
    items:[ 
     { 
      xtype: 'titlebar', 
      title: 'The main title', 
     }, 
     {xtype: 'feedcard'} 
    ] 
} 
}); 

Answer 2

设置为layout: 'fit'为您的主视图。