Как правильно установить размер значка кнопки в 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;
}
Вы можете повторно использовать код для всех кнопок "дополнительного размера" в вашем проекте, и вы можете добавить столько, сколько хотите.