Горизонтальное выравнивание значка кнопки с помощью iconAlign: «top» - PullRequest
Новая
       4

Горизонтальное выравнивание значка кнопки с помощью iconAlign: «top»

7 голосов
/ 08 сентября 2011

В ExtJS 4 я пытаюсь создать вертикально ориентированную ButtonGroup для запуска одной кнопкой: 

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;
}

Тем не менее, изображение вровень влево, как показано ниже:

enter image description here

Я довольно n00b с ExtJS, так что я уверен, что есть что-то очевидное, что яотсутствует.Я ожидал, что iconAlign: "top" выровняет изображение по центру по горизонтали в дополнение к флеш-топу, но, похоже, этого не происходит.Я наблюдаю те же эффекты в Firefox 6.0.2 и Chrome 13.0.

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

Спасибо!

ОБНОВЛЕНИЕ : Вот пример проекта , демонстрирующий проблему.

Ответы [ 4 ]

3 голосов
/ 09 сентября 2011

Я думаю, что есть проблема с самим изображением, или какой-то другой класс CSS вызывает эту проблему.Ext Js автоматически центрирует значок, когда установлен iconAlign : 'top'.Вот что написано в CSS: 

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

Когда я попробовал это сам, у меня не было никаких проблем.значок выровнен идеально.Пожалуйста, проверьте, не мешает ли какой-нибудь другой CSS классу значков, определенному Ext

2 голосов
/ 30 ноября 2011

Для ExtJS 4.0 у меня работает следующее: я должен переопределить ширину по умолчанию 16px, как установлено классами x -...

В своей кнопке я добавляю свой собственный класс (обратите внимание, что класс 'star' просто загружает фоновое изображение).

iconCls: 'star backcenter'

А затем установите его по центру с шириной: auto, чтобы переопределить 16px.Волшебным образом это работает для меня. 

.backcenter { 
   background-position:center  !important;
   width: auto !important;
}
1 голос
/ 09 сентября 2011

iconAllign: top из extjs просто устанавливает значок над текстом, а не по центру. Чтобы сделать предмет центрированным, вы должны иметь дело с CSS ... 

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

}

Я думаю, что это должно сделать ...

0 голосов
/ 09 января 2013

Я исправил эту проблему, добавив свойство css (style:{paddingLeft:'10px'}) к кнопке.

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