How to correctly set icon size of a button in extjs?

Question

I'm using extjs4 and What i'm trying to do seems to be simple but i can't find a working solution for it.

I have a 64*64px icon and i want my button to show it as the background image but extjs only shows the image partially.Googled on the net for a solution but nobody suggested a working solution for it.I just want my background image fit to my button.

here is my js code:

{
    xtype : 'button',
    text : null,
    iconCls : 'startbutton',
    //icon:'./assets/icons/startbtn.png',
    //style:{height:'60px'},
    width : 64,
    height : 64
}

here is my css code:

.x-btn-icon .startbutton {
    background-image: url(start.png) !important;
}

i tried some css combinations and still no success.

Answer 1

The iconCls refers strictly to the icon of the button, if you want the picture to cover the whole button you should add the background to a css class added to the button.

{
    xtype: 'button',
    width: 64,
    height: 64,
    text: 'some text',
    cls: 'startbutton'
}

and the css

.startbutton {
    background-image: url(start.png) !important;
}

Answer 2

I had an important issue with the accepted answer. The button text (left button in picture, below) appeared in the wrong position (behind the icon) - the position it was configured to be using the default scales.

In order to use an other-than-default icon size and place the text in the correct position, my solution was fairly simple, without overriding core styles.

I just replaced the text property with the html property. Then, I placed the desired button text within a 'span' and added a class to this span in order to position it correctly with CSS.

This is the code (tested on IE , Firefox , Chrome):

Button definition

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

Button iconCls

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

Span class

.bigBtn {
    position: absolute;
    bottom: 4px  !important;
    left: 0%  !important;
    text-align: center !important;
    width: 120px !important;
}

Of course this is for icon top text bottom. You can customize it for other layouts