Css ExtJS 4-设置filefield xtype按钮的样式

您好，我正在构建一个web应用程序，允许用户使用

文件字段

上传照片。我正在尝试设计按钮的样式，但是，我尝试的任何东西似乎都不起作用。起初，我尝试使用元素检查器来寻找合适的类类型，但没有得到我想要的结果。接下来，我为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中设置某些字段的样式有时会很困难。非常感谢您的帮助。谢谢。

A的属性需要配置。如果在按钮API中筛选Cls，则至少可以获得10个Cls属性，这些属性都可用于设置按钮样式

arrowCls

：字符串

如果按钮具有菜单，则用于内部箭头元素的类名

baseCls

：字符串

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

cls

：String

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

组件cls

：字符串

要添加到components根级别元素的CSS类，以通过样式对其进行区分

disabledCls

：String

组件被禁用时要添加的CSS类

focusCls

：字符串

当按钮处于聚焦状态时要添加到按钮的CSS类

iconCls

：String

一个css类，它设置一个背景图像作为此按钮的图标

menuActiveCls

：String

当按钮的菜单处于活动状态时，要添加到按钮的CSS类

overCls

：String

当按钮处于上方（悬停）状态时要添加到按钮的CSS类

按CLS

：字符串

按钮处于按下状态时要添加到按钮的CSS类

---

其他信息

---

cls

->附加的一个

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

---

baseCls

->改变一切的人

---

谢谢，我使用了

baseCls

属性。由于一些奇怪的原因，没有遵循宽度和高度属性。我试着把它放在buttonConfig和css中，但没有效果。@Razgriz不客气！请参阅我的编辑以了解有关classes@Razgriz你应该在这里使用chrome开发者工具/IE开发者工具/Firebug。我猜，包裹按钮的字段可能会导致溢出：隐藏。如果没有，请首先查看我的其他信息，并使用开发人员工具之一查找覆盖您的特性的css元素

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

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