ExtJS 4 - Styling the xtype button of the file field
Good afternoon, I am creating a web app and the user is allowed to upload a photo using fileField
. I am trying to style a button, however nothing I am trying seems to work. I first tried using the item inspector to find the type of class I wanted, but that didn't give the results I wanted. Then I assigned a class to the file field and created CSS for that style, but it didn't 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 the button is resized to accommodate the text. However, the text itself is not enlarged in any way.
Can anyone help me with my situation? Stacking some of the fields in ExtJS turns out to be a nip step. Any help is greatly appreciated. Thank.
source to share
A Ext.form.field.File is buttonConfig
that awaits configuration Ext.button.Button . If you filter for Cls inside the button API, you get at least 10 Cls properties that can be used to style the button.
arrowCls
: StringThe class name used for the inner arrow element if the button has a menu ....
baseCls
: StringBase CSS class to add to all buttons ....
cls
: StringThe CSS class string to apply to the main button element.
componentCls
: StringThe CSS class to be added to a component root-level element to distinguish it through styling.
disabledCls
: StringCSS class to add when component is disabled ....
focusCls
: StringThe CSS class to add to the button when it is in focus ...
iconCls
: StringA css class that sets a background image to use as the icon for this button ....
menuActiveCls
: StringCSS class to add to a button when this menu is active ....
overCls
: StringThe CSS class to add to a button when it is in a state (hover) ....
pressedCls
: StringThe CSS class to add to the button when it is pressed ...
Additional Information
cls
→ additional
This class is added to the inner element of the button
baseCls
→ the one who changes everything
// 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"> </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>'
Classes 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}
source to share