Change color of the field when condition is satisfied

Question

For example, I have textfield with input type 'email'. I have set the default color of the field to pink. if the input is in a proper email format, i want the textfield's color to be changed to white. how do i do that?

the eg code:

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

Answer 1

In this case first we need to check weather input value is an email or not. For that we are using var fieldValidation = Ext.form.field.VTypes.email(val); If fieldValidation is true then it input value is an email. Once we verified input value simply we change our background color. this.setFieldStyle("background-color : #FFFFFF")

Your code will like :

    {
        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");
           }
        }
    }

I created a fiddle for you. Please have a look. Working Fiddle.

Also I am attaching doc of Vtype for you which help you understand properly. Doc