how to make ExtJS' button's background image display correctly in Extjs 2.3

I kn开发者_Go百科ow Extjs 2.3 is pretty old but i'm taking over someone's work here.so my hands are tied for now.

well i'm supposed to change few things in the interface and add new functionality. this is my first real ExtJS work (jquery boy here).

i wanted to add new icons on a button and it appears i can't even get the image shown correcty as i can't affect the height of the button, either on the button object property, or in css. all that i managed to do is affect the width of the button.

here is my attempt

  btntelButton = new Ext.Button({
            name: 'telbtn',
            id: 'btntel',
            cls : 'x-btn-icon',
            iconCls: 'telButton',
            minWidth : 95,
        });
    <style type="text/css">
       .telButton
        {
            height: 60px;
             background-image: url(images/tel.png) !important;
        }
    </style>

with the use of telButton class, the backgound images comes but resized to its minimum size, showing only a small portion of the image

when i use the style on the button itself like

    //...
    id: 'btntel',
    cls : 'x-btn-icon',
    style: {height: '90px'}
    //...

it's shows

i've been pulling my hair for the passed few hours. How would you Extjs folks do this? please shed a light on this. Thanks for reading

---

you can add a style directly to a button

For Example:

style:{height:'60px'}

Second thought would be declaring your css class as:

 .telButton
  {
      height: 60px;
      background-image: url(images/tel.png) !important;
  }

rather than --> button.telButton (not sure if it'll make any difference)