extjs - 满足条件时更改字段的颜色

Question

例如，我有一个输入类型为“电子邮件”的文本字段。我已将字段的默认颜色设置为粉红色。如果输入采用正确的电子邮件格式，我希望将文本字段的颜色更改为白色。我该怎么做？

例如代码:

xtype: 'textfield',
labelWidth : 250,
fieldStyle: 'background-color : #F5A9A9',
vtype :  'email',
fieldLabel: 'email address'

Answer 1

在这种情况下，我们首先需要检查天气输入值是否为电子邮件。为此，我们正在使用var fieldValidation = Ext.form.field.VTypes.email(val);如果 fieldValidation 为 true，则输入值是电子邮件。一旦我们验证了输入值，我们只需更改背景颜色即可。 this.setFieldStyle("背景颜色:#FFFFFF")

你的代码会喜欢:

    {
        xtype: 'textfield',
         fieldStyle: 'background-color : #F5A9A9',
        vtype :  'email',
        fieldLabel: 'email address',
        validator : function(val){
        var fieldValidation =  Ext.form.field.VTypes.email(val);
           if(fieldValidation == true){
              this.setFieldStyle("background-color : #FFFFFF");
           }
        }
    }

我为你创建了一个 fiddle 。请看一看。 Working Fiddle .

我还为您附上了Vtype的文档，以帮助您正确理解。 Doc