无法在Ext JS按钮的中间对齐按钮图标

Question

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

我无法使用alignTo方法或CSS中的background-position来实现上述目标。

图标为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;
}