Search code examples
javascriptcssextjsextjs4

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


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

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