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的布局和extend：属性，将其更改为Container或Panel，无效。我试着查看Sencha的Kitchensink示例，但是我发现代码中没有任何部分在Tab栏UI源中定义标题栏。任何帮助将不胜感激，谢谢。

Answer 1

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

Answer 2

尝试在主视图中添加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'}
    ]
}
});

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

2 个答案: