ExtJS 4 - Укладка кнопки файлового поля xtype

Question

Добрый день, я создаю веб-приложение, и пользователю разрешено загружать фотографию с помощью fileField. Я пытаюсь создать стиль кнопки, однако ничего, что я пытаюсь, кажется, работает. Сначала я попробовал использовать инспектор элементов для поиска нужного типа класса, но это не дало результатов, которые я хотел. Затем я назначил класс файловому полю и создал CSS для этого стиля, но он тоже не работал. Вот мой код:

мой FileField

{ 

    xtype: 'filefield', 
    x: 200, 
    y: 910, 
    cls: 'fileBtnClass', 
    width: 200, 
    fieldLabel: 'LABEL', 
    hideLabel: true, 
    labelStyle: 'text-align: center; color: white', 
    labelWidth: 140, 
    buttonOnly: true, 
    buttonText: 'Browse' 

} 

мой CSS:

.fileBtnClass { 
    font-size: 40px !important; 
    font-family: 'Arial' !important; 
    font-weight: normal !important; 
    color: black !important; 
    background-color: white !important; 
    border-radius: 15px !important; 
    text-align: center; 
} 

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

Может ли кто-нибудь помочь мне в моей ситуации? Укладка некоторых полей в ExtJS оказывается зажимным шагом. Любая помощь очень ценится. Спасибо.

Answer 1

A Ext.form.field.File имеет buttonConfig объект который ожидает Ext.button.Button конфигурации. Если вы фильтруете для Cls в API кнопки, вы получаете не менее 10 Cls-свойств, которые могут быть использованы для стилизации кнопки.

arrowCls: Строка

Имя класса, используемого для внутреннего элемента стрелки, если кнопка имеет меню. ...

baseCls: Строка

Базовый класс CSS, чтобы добавить ко всем кнопкам. ...

cls: Строки Строки класса

CSS-применить к главному элементу кнопки.

componentCls: Строка

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

disabledCls: Строка

CSS класс для добавления, когда компонент отключен. ...

focusCls: Строки

Класс CSS, чтобы добавить к кнопке, когда он находится в состоянии сосредоточенного. ...

iconCls: Строка

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

menuActiveCls: Строка

Класс CSS, чтобы добавить к кнопке, когда это меню активно. ...

overCls: Строка

Класс CSS, чтобы добавить к кнопке, когда она находится в более (наведен) состоянии. ...

pressedCls: Строка

Класс CSS, чтобы добавить к кнопке, когда она находится в нажатом состоянии. ...

---

Дополнительная информация

---

cls -> дополнительный один

Этот класс добавляется к внутреннему элементу кнопки

---

baseCls -> тот, кто меняет его все

// following the template that is used to render a button 
    '<span id="{id}-btnWrap" role="presentation" class="{baseCls}-wrap', 
     '<tpl if="splitCls"> {splitCls}</tpl>', 
     '{childElCls}" unselectable="on">', 
     '<span id="{id}-btnEl" class="{baseCls}-button" role="presentation">', 
      '<span id="{id}-btnInnerEl" class="{baseCls}-inner {innerCls}', 
       '{childElCls}" unselectable="on">', 
       '{text}', 
      '</span>', 
      '<span role="presentation" id="{id}-btnIconEl" class="{baseCls}-icon-el {iconCls}', 
       '{childElCls} {glyphCls}" unselectable="on" style="', 
       '<tpl if="iconUrl">background-image:url({iconUrl});</tpl>', 
       '<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">', 
       '<tpl if="glyph">&#{glyph};</tpl><tpl if="iconCls || iconUrl">&#160;</tpl>', 
      '</span>', 
     '</span>', 
    '</span>', 
    // if "closable" (tab) add a close element icon 
    '<tpl if="closable">', 
     '<span id="{id}-closeEl" role="presentation"', 
      ' class="{baseCls}-close-btn"', 
      '<tpl if="closeText">', 
       ' title="{closeText}" aria-label="{closeText}"', 
      '</tpl>', 
      '>', 
     '</span>', 
    '</tpl>' 

Классы, которые непосредственно затронуты baseCls:

// applied in the template 
{baseCls}-wrap 
{baseCls}-button 
{baseCls}-inner 
{baseCls}-close-btn 
// just a view that are (may be) applied in code 
{glyphCls} 
{innerCls}