Как правильно установить размер иконки кнопки в extjs? - PullRequest
Новая
       3

Как правильно установить размер иконки кнопки в extjs?

15 голосов
/ 30 сентября 2011

Я использую extjs4, и то, что я пытаюсь сделать, кажется простым, но я не могу найти рабочее решение для него.

У меня есть значок размером 64 * 64 пикселя, и я хочу свою кнопкучтобы показать его как фоновое изображение, но extjs показывает только изображение частично . Для поиска в сети гуглил, но никто не предлагал , работающий решение для этого. Я просто хочу, чтобы мое фоновое изображение соответствовало моей кнопке.

вот мой код js: 

{
    xtype : 'button',
    text : null,
    iconCls : 'startbutton',
    //icon:'./assets/icons/startbtn.png',
    //style:{height:'60px'},
    width : 64,
    height : 64
}

вот мой код css: 

.x-btn-icon .startbutton {
    background-image: url(start.png) !important;
}

Я попробовал несколько комбинаций CSS и все еще безуспешно.

Ответы [ 4 ]

10 голосов
/ 30 сентября 2011

iconCls относится исключительно к значку кнопки, если вы хотите, чтобы изображение покрывало всю кнопку, вы должны добавить фон к классу CSS, добавленному к кнопке. 

{
    xtype: 'button',
    width: 64,
    height: 64,
    text: 'some text',
    cls: 'startbutton'
}

и КСС 

.startbutton {
    background-image: url(start.png) !important;
}
4 голосов
/ 09 ноября 2012

У меня была важная проблема с принятым ответом.Текст кнопки (левая кнопка на рисунке внизу) появился в неправильном положении (за значком) - положение, в котором он был настроен для использования шкал по умолчанию.

enter image description here

InЧтобы использовать размер значка, отличный от размера по умолчанию, и поместить текст в правильное положение, мое решение было довольно простым: без переопределения основных стилей.

Я просто заменил textсвойство с html свойство.Затем я поместил нужный текст кнопки в «span» и добавил класс к этому span, чтобы правильно расположить его с помощью CSS.

Это код (протестирован в IE, Firefox, Chrome):

Определение кнопки 

xtype:'button',
iconCls:'contactIcon80',
iconAlign:'top',
width:120,
height:100,
html:'<span class="bigBtn">Damn you hayate</span>'

Кнопка iconCls 

.contactIcon80 {
    background-image: url(../images/calendar80.png) !important;
    width:80px!important;
    height:80px!important;
    margin-right: auto !important;
    margin-left: auto !important;
}

Класс Span

.bigBtn {
    position: absolute;
    bottom: 4px  !important;
    left: 0%  !important;
    text-align: center !important;
    width: 120px !important;
}

Конечно, это для иконки вверху текста внизу.Вы можете настроить его для других макетов

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

Хотя это не поможет, если изображение имеет высоту / ширину 64 пикселя, для настройки размера кнопки можно использовать следующую конфигурационную настройку «Масштаб»:

• «маленький» -Получается, что элемент кнопки имеет высоту 16px.

• 'medium' - Получается, что элемент кнопки имеет высоту 24px.

• 'large' - Получается, что элемент button имеет высоту 32px

1 голос
/ 13 сентября 2012

Я использую ExtJS 3.4.0, и я не знаю, легче ли это в 4.x, но я надеюсь на это!

Я решил проблему создания новых стилей кнопок помимо small / medium/ Large, затем на кнопку, указав: 

{ text: 'Read Data',
  scale: 'extra',
  iconAlign: 'left',
  iconCls:'read_icon'}

CSS-код должен быть указан для каждой стороны, где вы собираетесь использовать значок, в моем случае я только что определил для левой стороны, но вы должныклон для каждой стороны сверху / снизу / справа / слева.Вы можете найти весь оригинальный код внутри ext-all.css, вот что я использую для значка 64x64 

.x-btn-text-icon .x-btn-icon-extra-left .x-btn-text{
  background-position: 0 center;
  background-repeat: no-repeat;
  padding-left:66px;
  height:64px;
}

. Вы можете повторно использовать код для всех кнопок «лишнего» размера вваш проект, и вы можете добавить столько, сколько хотите

...