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

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

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

вот мой код 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-комбинации и до сих пор не добился успеха.

ОТВЕТЫ

Ответ 1

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

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

и css

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

Ответ 2

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

enter image description here

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

Я просто заменил свойство text свойством html. Затем я поместил нужный текст кнопки в "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;
}

Класс пробела

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

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

Ответ 3

Хотя это не поможет напрямую, если вы используете изображение размером 64 пикселя в ширину, для настройки размера кнопки можно использовать следующую настройку "масштаб":

• 'small' - результат, когда элемент кнопки имеет высоту 16 пикселей.

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

• 'large' - результат, в котором элемент кнопки имеет высоту 32 пикселя

Ответ 4

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

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

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

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