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:
background-position: top center;
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