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.

score 10 · Accepted Answer · edited Mar 12 '14 at 14:23

10

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

edited Mar 12 '14 at 14:23

A.L

10,259
10
67
98

answered Sep 30 '11 at 12:28

nscrob

4,483
1
20
24

score 4 · Answer 2 · edited Apr 23 '15 at 13:47

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.

enter image description here

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

score 3 · Answer 3 · answered Sep 30 '11 at 11:53

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

answered Sep 30 '11 at 11:53

dougajmcdonald

19,231
12
56
89

i already did whay you suggest but it displays half of the icon and not all of it. – Mehdi Fanai Sep 30 '11 at 12:05

score 1 · Answer 4 · answered Sep 13 '12 at 10:03

1

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

answered Sep 13 '12 at 10:03

Valerio

2,390
3
24
34

Yours is the best answer I have seen around on SO. Is there a way to do this `scale` property for the `button` as a whole? – Thomas Apr 28 '15 at 18:58
I'm sorry @Thomas, this was long time ago... I have not used Ext since :( have no clue now – Valerio Apr 29 '15 at 16:55
not a problem! It was a shot in the dark. I'll leave the comment up, though, in case some one sees it and thinks, "Oh, I know" – Thomas Apr 29 '15 at 21:18

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

4 Answers4

Linked