View Full Version : IconCls Issue

16 Aug 2011, 1:38 AM
I tried to create a window-ish toolbar for my application and realized the buttons were not aligned correctly (in Ext js 4.0.2a) even though I set the iconCls to a stylesheet definition like this:

.toolbar-icon {
background-position: top center;

The javascript code looks like this:

xtype: 'toolbar',
dock: 'top',
defaults: {
arrowAlign: 'bottom',
iconAlign: 'top',
scale: 'large'
items: [{
icon: 'resources/images/tango/32x32/actions/document-new.png',
text: 'Bearbeiten',
action: 'edit'
}, {
icon: 'resources/images/tango/32x32/actions/document-save.png',
text: 'Speichern',
action: 'save'
}, {
icon: 'resources/images/tango/32x32/actions/document-print.png',
text: 'Drucken',
action: 'print'

While inspecting the dom I realized the stylesheet class was applied to a span (<span class="x-btn-icon toolbar-icon">) below the span that really contains the background-image (<span class="x-btn-inner" style="background-image...">). Applying the mentioned stylesheet definition to .x-btn-inner correctly aligns the image but what is the purpose of iconCls then? Is it meant as a mean to have fine-grained controll over the background-image when I choose not to use the icon property at all and instead opt for using iconCls to declare a background property?

Why doesn't iconAlign: 'top', arrowAlign: 'bottom' horizontally center-align the icon in the first place?

Thanks in advance

16 Aug 2011, 3:08 PM
iconCls is the preferred way to specify an icon in many components, including buttons. Usually you would only specify a background-image in such a class, positioning should be automatic.

I agree, using icon instead of iconCls doesn't align things correctly, I think this is a bug. I tried your example with iconCls instead and it aligns things nicely.

17 Aug 2011, 3:18 PM
Thank you very mich skirtle. I'll try that out tomorrow.