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.

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

Solution 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

Solution 3

Although this won't directly help if you're image is 64px high/wide, the following config 'scale' option can be used to adjust the size of a button:

•'small' - Results in the button element being 16px high.

•'medium' - Results in the button element being 24px high.

•'large' - Results in the button element being 32px high

Solution 4

I'm using ExtJS 3.4.0 and i don't know if this is any easier in 4.x but i hope so!

I have solved the issue creating new button styles besides small/medium/large, then on the button specifing:

{ text: 'Read Data',
  scale: 'extra',
  iconAlign: 'left',
  iconCls:'read_icon'}

CSS code must be specified for each side you're gonna use the icon, in my case i've just defined for left side, but you have to clone for each side top/bottom/right/left. You can find all the original code inside ext-all.css, here's what i'm using for a 64x64 icon

.x-btn-text-icon .x-btn-icon-extra-left .x-btn-text{
  background-position: 0 center;
  background-repeat: no-repeat;
  padding-left:66px;
  height:64px;
}

You can re-use the code for all the 'extra'-sized buttons in your project and you can add as many you want

View more solutions