2

Ext JS 4.1.1のボタンにアイコンだけ表示したい(テキスト無し)。ボタンの幅をアイコンの幅より少し長くしたい。アイコンは常に左揃えで表示されます。ボタンの中央に配置したい。

alignToメソッドまたはbackground-positionCSSのいずれかを使用して上記を達成することはできません。

アイコンは32x32pxのpngファイルです。

Ext JS コード:

var topToolBar = Ext.create('Ext.toolbar.Toolbar', {
                width: '100%',
                items: [{
                    iconCls: 'home32',
                    width: 60,
                    iconAlign: 'center',
                    scale: 'large'
                }]});


            var master = Ext.create('Ext.panel.Panel', {
                layout: 'anchor',
                anchor: '100% 100%',
                renderTo: Ext.getBody(),
                tbar: [topToolBar]
            });

CSS コード:

.home32 
{
    background-position: center center;
    background-image: url( images/32/home.png ) !important;
}
4

1 に答える 1

0

Ext Js は単純な css-html であることを忘れないでください。昔ながらの古典的な方法を試してみてください。

ボタン定義

 xtype:'button',
                    iconCls:'contactIcon80',
                    iconAlign:'top',
                    width:120,
                    height:100,
                    html:'<span class="bigBtn">Damn you hayate/span>'

ボタン アイコン クラス

.contactIcon80 {
background-image: url(../images/calendar80.png) !important;
width:80px!important;
height:80px!important;
margin-right: auto !important;
margin-left: auto !important;

}

Html スパン クラス (これは、正しい位置にある場合にテキストを配置するためのものです) この方法を使用すると、16x16 - 24x24 - 32x32 だけでなく、より大きなボタン アイコン サイズを使用できます。

.bigBtn {
position: absolute;
bottom: 4px  !important;

}

于 2012-11-09T00:20:29.600 に答える