0

I want to fill a button with an icon I created but whatever I have tried just seems to put the icon either half cut off and way left, or it doesn't show at all. I've been trying different combinations of CSS and the icon, iconcls, cls button options.

I was following the Ext 3 buttons example page but that doesn't seem to display anything for me...

This code is an item inside my form panel (I try to replicate this with different buttons in the panel)
{
                    xtype: 'container',
                    layout: {
                        type: 'table',
                        columns: 2,
                        tableAttrs: {
                            cellspacing: 5
                        }
                    },                  
//                  padding: 5,
                    pack: 'center',
                    align: 'middle',
                    items: [{
                        xtype: 'button',
                        width: 40,
//                      scale: 'medium',
                        ref: '../drawToolsBtn',
                        tooltip: 'Drawing Tools',
                        icon: 'img/draw.png',
                        iconAlign: 'top',
                        baseCls: 'x-plain',
//                      iconCls: 'drawBtn',
                        enableToggle: true,
//                      padding: 3,
                        toggleHandler: function(btn, state)
                        {
                            this.showDrawToolsWin(state);
                        },
                        scope: this
                    },{
                        xtype: 'label',
//                      columnWidth: 1, // remainder of container
                        padding: 3,
                        text: 'Click button to open Drawing Tools Menu'
                    }]
                }


CSS
--------------------
.drawBtn{
    background: url(../img/draw.png) !important;


}

Thank you for any help!

Crushing
  • 487
  • 1
  • 9
  • 24
  • Code seems to be correct. verify the path of the icon. Is there any ajax failure yous see in firebug console? – AJJ Oct 04 '12 at 11:11
  • Icon gets retrieved, if I add a text: 'DRAW' to the button it display properly (icon centered in button).. If I don't have that it's like the icon is confined to the left half of the button. – Crushing Oct 04 '12 at 12:42
  • Try this .drawBtn{ background: url(../img/draw.png) center right no-repeat !important; } – AJJ Oct 04 '12 at 12:59
  • That doesn't show anything.. If i remove the text option, the button will be blank. – Crushing Oct 04 '12 at 16:58
  • The example says background-image: url(../img/draw.png) !important; In your code, it is just background..!! – AJJ Oct 05 '12 at 03:53
  • I had background-image, but the button was blank. background at least got the image on the button... – Crushing Oct 06 '12 at 10:25
  • Check my solution over here [Ext js Custom button icon size ][1] [1]: http://stackoverflow.com/questions/7609727/how-to-correctly-set-icon-size-of-a-button-in-extjs/13300483#13300483 – Anestis Kivranoglou Nov 09 '12 at 01:15

1 Answers1

0
.drawBtn{
    background-image: url(../img/draw.png) !important;
 }
AJJ
  • 3,570
  • 7
  • 43
  • 76
  • Yes, I've literally tried dozens and dozens configurations. the css works well when I have the text option set but that's about it. – Crushing Oct 06 '12 at 10:25