Extjs 3.4 - Button Icon does not show or does not center
- by Chris
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!
