当我添加标题栏时，tabBar 中的 sencha touch html 不显示

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'。