sencha-touch-2 - 标题中的图像不会显示

Question

我正在尝试构建一个具有顶部居中徽标的标题栏的界面。这是我正在使用的代码。图片不显示。在运行时检查元素时，元素显示的高度为“0”，而不是使用 100% 来匹配包含元素的高度。

Ext.define("RFN.view.Main", {
    extend: 'Ext.TabPanel',

    config: {
         tabBarPosition: 'bottom',
         items: [
            {
             title: 'Calculate',
             iconCls: 'home',
             //styleHtmlContent: true,
             //scrollable: true,
             layout: 'vbox',
             items:[
               {
                xtype: 'panel',
                style: 'background-color: #174a7c;text-align:center;',
                items:[
                  {
                   xtype: 'image',
                   src: 'resources/images/logo.png',
                   height: '100%'
                  }
                ],
                flex: 1
              },
              {
               xtype: 'panel',
               style: 'background-color: #999999;',
               flex:4
              }
             ]
            },
            {
             title: 'Compare',
             iconCls: 'chart2',
             //styleHtmlContent: true,
             //scrollable: true,
             layout: 'vbox',
             items:[
               {
                style: 'background-color: #174a7c;',
                flex: 1
               },
               {
                style: 'background-color: #999999;',
                flex:4
               }
             ]
            }
         ]
    }
});

Answer 1

只需在包含图像的面板上添加布局配置。然后，您可以删除图像上的高度配置，因为布局使内部项目自动适应整个高度和宽度：

...
xtype: 'panel',
style: 'background-color: #174a7c;text-align:center;',
items:[{
    xtype: 'image',
    src: 'resources/images/logo.png',
}],
flex: 1
...

希望这可以帮助

Answer 2

或者你可以做我所做的，并有一个 vbox 的布局，标题的 flex 为 0.3，我的 tabpanel 为 0.7。0.3 的项目是一个面板，在类配置（cls）中，我有我的 CSS 类名，例如 Header。在我的 CSS 类 .header 中，我设置了背景和徽标。希望这可以帮助...