Кнопка значок горизонтальное выравнивание с iconalign: «TOP»

в extjs 4, я пытаюсь создать вертикально ориентированную кнопку кнопки с одной кнопкой для начала:

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

правило CSS просто указывает Фоновое изображение:

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

Тем не менее, изображение влево, как это проиллюстрировано ниже:

Я вполне N00B с Extjs, поэтому я уверен, что есть что-то очевидное, что мне не хватает. Я бы ожидал iconAlign: «TOP» , чтобы выровнять изображение, центрированное горизонтально, в дополнение к топу, но это не то, что, кажется, происходит. Я вижу те же эффекты на Firefox 6.0.2 и Chrome 13.0.

Какой конфигурация Вариант или CSS Правило мне не хватает?

Спасибо!

Обновление : Вот образец проекта , демонстрирующий проблему.