0

上部中央にロゴが配置されたヘッダー バーを持つインターフェイスを構築しようとしています。これが私が使用しているコードです。画像が表示されません。実行時に要素を検査すると、要素は、含まれる要素の高さと一致する 100% を使用するのではなく、高さ '0' で表示されます。

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
               }
             ]
            }
         ]
    }
});
4

2 に答える 2

0

または、私が行ったことを実行してvboxのレイアウトを設定し、ヘッダーのフレックスを0.3、タブパネルを0.7にすることもできます。0.3だったアイテムはパネルで、クラスconfig（cls）には、ヘッダーなどのCSSクラス名がありました。CSSクラスの.headerで、背景とロゴを設定しました。お役に立てれば...

于 2012-08-08T22:31:27.463 に答える
0

画像を含むパネルにレイアウト構成を追加するだけです。次に、レイアウトが内部アイテムを全体の高さと幅に自動的に合わせるように、画像の高さ構成を削除できます。

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

お役に立てれば

于 2012-08-06T22:24:59.640 に答える