Button icon horizontal alignment with iconAlign: "top"

Question

In ExtJS 4, I am attempting to create a vertically-oriented ButtonGroup with one button to start:

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

The CSS rule just specifies the background image:

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

However, the image is flush left, as is illustrated below:

I'm quite the n00b with ExtJS, so I'm sure there's something obvious that I am missing. I would have expected iconAlign: "top" to align the image centered horizontally in addition to flush-top, but that's not what seems to happen. I am seeing the same effects on Firefox 6.0.2 and Chrome 13.0.

What config option or CSS rule am I missing?

Thanks!

UPDATE: here is a sample project demonstrating the issue.

Answer 1

I think there is a problem with the image itself, or some other css class is causing this problem. Ext Js automatically centers the icon when iconAlign : 'top' is set. Here's the what's written in the 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 this myself, I had no problems at all.

As you can see, the icon is aligned perfectly. Please check if some other css is interfering with the icon class defined by Ext

Answer 2

For ExtJS 4.0, the following works for me: I have to override the default width of 16px as set by the x-... classes.

In my button I add my own custom class (note the 'star' class simply loads the background image).

iconCls: 'star backcenter'

And then set it to be centered, with the width:auto to override the 16px. Magically it works for me.

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