css - 无法在 Ext JS 按钮的中心对齐按钮图标

Question

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

我无法使用alignTo方法或background-positionCSS 实现上述目标。

图标是 32x32px png 文件。

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

Answer 1

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

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

}