如何使用 ExtJS 更改文本字段的颜色？答案

【问题标题】：How do I change color of a textfield using ExtJS?如何使用 ExtJS 更改文本字段的颜色？
【发布时间】：2012-03-02 03:02:03
【问题描述】：

我想更改 ExtJS 文本字段的颜色，但没有成功。标签是获取颜色的组件：

var textfield= Ext.create('Ext.form.Text', 
    {
        id: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        style: 'background-color: #ddd;',
        allowBlank: false,
    });

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [textfield]
});

示例： http://jsfiddle.net/3ZZcZ/

如何改变颜色？

【问题讨论】：

标签： extjs textfield background-color

【解决方案1】：

您需要设置fieldStyle 而不是style。您还需要覆盖 Ext JS 默认值，它会在字段上设置背景图像。像这样：

fieldStyle: 'background-color: #ddd; background-image: none;'

【讨论】：

这个不能动态设置？
是的，您将如何动态更改它？

【解决方案2】：

解决此问题的更好方法是将 fieldCls 属性设置为 CSS 类。

像这样：

字段配置：

fieldCls: 'required'

CSS：

.required {
    background-image:none;
    background-color:#FFFFCC;
}

【讨论】：

【解决方案3】：

您可以通过多种方式做到这一点

选项1（全局）：更改“Ext.form.field.Text”的SASS变量值

eg: $form-text-field-color: #003168 !default;

选项 2：创建一个 mixin

eg:

file -> sass/src/form/field/Text.scss

@include extjs-text-field-ui(
    $ui: 'customName',
    $ui-color: #003168
);

js: 
    {
        xtype: 'textfield',
        ui: 'customName'
    }

选项3：使用表单字段的“fieldStyle”配置

eg:
{
    xtype: 'textfield',
    fieldLabel: 'Test Label',
    fieldStyle: 'font-weight: bold; color: #003168;',
    labelWidth: 170
}

选项 4：将“cls”添加到表单字段并将您的样式添加到您的 css 文件中

eg: 
js:
{
    xtype: 'form',
    defaults: {
        cls: 'test-class'
    }
}

CSS:
.test-class .x-form-text {
    color: #003168;
}

【讨论】：

【解决方案4】：

扩展 Vasiliy 的答案。样式可以动态设置如下：

Ext.get('textfield').setStyle('background-color','#ddd');
Ext.get('textfield').setStyle('background-image','none');

【讨论】：

这是更改 LABEL 背景颜色，而不是文本字段。