ExtJS 4 - 样式化文件字段 xtype 的按钮

Question

美好的一天，我正在构建一个 Web 应用程序，允许用户使用 fileField 上传照片。我正在尝试设置按钮的样式，但是，我尝试的任何操作似乎都不起作用。起初我尝试使用元素检查器来寻找合适的 class 类型，但没有给出我想要的结果。接下来，我为 fileField 分配了一个 class 并为该样式创建了一个 css 但它也不起作用。这是我的代码：

我的文件字段

{

    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

一个Ext.form.field.File has a buttonConfig property which expect a Ext.button.Button配置。如果您在按钮 API 中筛选 Cls，您将获得至少 10 个 Cls 属性，它们都可用于设置按钮的样式。

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. ...

附加信息

cls -> 加一个

这个class被添加到按钮的内部元素

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影响的classes：

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

ExtJS 4 - 样式化文件字段 xtype 的按钮

ExtJS 4 - Styling the button of a filefield xtype

css

extjs

extjs4