Styling the button of a filefield xtype

Question

I am building a web application and the user is allowed to upload a photo using a fileField. I am trying to style the button, however, nothing I try seems to work. At first I tried using the element inspector to look for the proper class type but that did not give the results I wanted. Next, I assigned a class to the fileField and created a css for that style but it did not work either. Here is my code:

my 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'

}

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

What happens is that the button size gets larger to accommodate the text. However, the text itself does not get larger in any way.

Styling certain fields in ExtJS proves to be a pinch at times.

Answer 1

A Ext.form.field.File has a buttonConfig property which expect a Ext.button.Button configuration. If you filter for Cls within the button API you get at least 10 Cls properties that can all be used to style the button.

arrowCls : String

The className used for the inner arrow element if the button has a menu. ...

baseCls : String

The base CSS class to add to all buttons. ...

cls : String

A CSS class string to apply to the button's main element.

componentCls : String

CSS Class to be added to a components root level element to give distinction to it via styling.

disabledCls : String

CSS class to add when the Component is disabled. ...

focusCls : String

The CSS class to add to a button when it is in the focussed state. ...

iconCls : String

A css class which sets a background image to be used as the icon for this button. ...

menuActiveCls : String

The CSS class to add to a button when it's menu is active. ...

overCls : String

The CSS class to add to a button when it is in the over (hovered) state. ...

pressedCls : String

The CSS class to add to a button when it is in the pressed state. ...

---

Additional Info

---

cls -> the additional one

This class is added to the inner element of the button

---

baseCls -> the one who change it all

// 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>'

The classes that are directly affected by 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}