Question

美好的一天，我正在构建一个Web应用程序，并允许用户使用fileField上传照片。我试图设置按钮的样式，但是，我尝试的任何东西似乎都没有用。起初我尝试使用元素检查器来查找正确的类类型，但是没有给出我想要的结果。接下来，我为fileField分配了一个类，并为该样式创建了一个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具有buttonConfig属性，期望Ext.button.Button配置。如果您在按钮API中过滤 Cls ，您将获得至少10个Cls属性，这些属性都可用于设置按钮的样式。

arrowCls：字符串

如果按钮具有菜单，则用于内部箭头元素的className。 ......

baseCls：字符串

要添加到所有按钮的基本CSS类。 ......

cls：字符串

要应用于按钮主要元素的CSS类字符串。

componentCls：字符串

要添加到组件根级别元素的CSS类，以通过样式区分它。

disabledCls：字符串

禁用Component时要添加的CSS类。 ......

focusCls：字符串

当处于焦点状态时添加到按钮的CSS类。 ......

iconCls：字符串

一个css类，用于设置背景图像以用作此按钮的图标。 ......

menuActiveCls：字符串

要在菜单处于活动状态时添加到按钮的CSS类。 ... 的

overCls：字符串

当处于覆盖（悬停）状态时添加到按钮的CSS类。 ......

pressedCls：字符串

要在按钮状态下添加到按钮的CSS类。 ... 的

其他信息

cls - ＆gt;额外的

此类将添加到按钮的内部元素

baseCls - ＆gt;改变一切的人

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

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

1 个答案: