The horizontal alignment button icon with the icon. "Top"

Question

In ExtJS 4, I am trying to create a vertically oriented ButtonGroup with one button to run:

 new Ext.ButtonGroup({ columns: 1, region: "west", collapsible: false, defaults: { scale: "large", iconAlign: "top" }, items: [{ text: "Your Books", iconCls: "icon-books" } ] }) 

The CSS rule simply indicates a background image:

 .icon-books { background-image: url(/images/book_open.png) !important; } 

However, the image is flush to the left, as shown below:

I am pretty n00b with ExtJS, so I'm sure there is something obvious that I am missing. I would expect iconAlign: "top" to align the image horizontally in addition to flush-top, but that's not what it seems. I see the same effects on Firefox 6.0.2 and Chrome 13.0.

What configuration parameter or CSS rule am I missing?

Thanks!

UPDATE : here is a sample project demonstrating the problem.

Answer 1

I think the problem with the image itself, or some other css class is causing this problem. Ext Js automatically centers the icon when iconAlign : 'top' installed. Here is what is written in css:

 .x-btn-text-icon .x-btn-icon-small-top .x-btn-text{ background-position: center 0; background-repeat: no-repeat; padding-top:18px; } 

When I tried it myself, I had no problems.

As you can see, the icon aligns perfectly. Check if any other css icon class defined by Ext

Answer 2

For ExtJS 4.0, the following works for me: I need to override the default 16px width specified by the x -.... classes

In my button, I add my own custom class (note that the star class just loads the background image).

 iconCls: 'star backcenter' 

And then set it in the center, with a width of: auto, to override 16px. Magically this works for me.

 .backcenter { background-position:center !important; width: auto !important; } 

Answer 3

iconAllign: the top of extjs just sets the icon above the text, not in the center. To make an element centered you need to deal with css ...

 .icon-books { background-image: url(/images/book_open.png) !important; background-position:center; } 

I think this should do it ...

Answer 4

I will improve this problem by adding the css property ( style:{paddingLeft:'10px'} ) to the button.

 text:'<b>Cancel</b>', name:'btCancel', iconCls:'btCancel', width:89, height:37, style:{paddingLeft:'10px'}