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的项目是一个面板，在类config（cls）中我有我的CSS类名，例如头。在我的CSS类.header中，我设置了背景和徽标。希望这会有所帮助...

标题中的图像不会显示

2 个答案: