无法在ExtJS按钮的中心对齐按钮图标

Question

我只想在Ext JS 4.1.1按钮上显示一个图标（无文本）。我希望按钮的宽度比图标的宽度长一点。显示时，图标始终左对齐。我希望它在按钮的中心。

无论是使用alignTo方法还是CSS中的background-position，我都无法实现上述功能。

图标为32x32px png文件。

ExtJS代码：

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;
}

Answer 1

不要忘记ExtJs毕竟是纯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 span类（这是用于在正确位置放置文本）通过这种方式，您可以使用更大的按钮图标大小，而不仅仅是16x16-24x24-32x32

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

}