Creating custom VTypes

1. We start by defining our VType's structure. This consists of a simple object
literal with three properties. A function called telNumber and two strings
called telNumberText (which will contain the error message text) and
telNumberMask (which holds a regex to restrict the characters allowed
to be entered into the field) respectively.
var telNumberVType = {
telNumber: function(val, field){
// function executed when field is validated
// return true when field's value (val) is valid
return true;
},
telNumberText: 'Your Telephone Number must only include
numbers and hyphens.',
telNumberMask: /[\d\-]/
};

2. Next we define the regular expression that we will use to validate the field's value.
We add this as a variable to the telNumber function:
telNumber: function(val, field){
var telNumberRegex = /^\d{4}\-\d{3}\-\d{4}$/;
return true;
}

3. Once this has been done we can add the logic to this telNumber function that will
decide whether the field's current value is valid. This is a simple call to the regular
expression string's test method, which returns true if the value matches or false
if it doesn't:
telNumber: function(val, field){
var telNumberRegex = /^\d{4}\-\d{3}\-\d{4}$/;
return telNumberRegex.test(val);
}

4. The final step to defining our new VType is to apply it to the Ext.form.field.
VTypes singleton, which is where all of the VTypes are located and where our
field's validation routine will go to get its definition:
Ext.apply(Ext.form.field.VTypes, telNumberVType);

5. Now that our VType has been defined and registered with the framework, we can
apply it to the field by using the vtype configuration option. The result can be seen
in the following screenshot:
{
xtype: 'textfield',
name: 'TelNumber',
flex: 4,
vtype: 'telNumber'
}

if (vtype) {
if(!vtypes[vtype](value, me)){
errors.push(me.vtypeText || vtypes[vtype +'Text']);
}
}

Ext.apply(Ext.form.field.VTypes, {
password: function(val, field){
return false;
},
passwordText: 'Your Passwords do not match.'
});

password: function(val, field){
var parentForm = field.up('form'); // get parent form
// get the form's values
var formValues = parentForm.getValues();
return false;
}

password: function(val, field){
var parentForm = field.up('form'); // get parent form
// get the form's values
var formValues = parentForm.getValues();
// get the value from the configured 'First Password' field
var firstPasswordValue = formValues[field.firstPasswordFieldName];
// return true if they match
return val === firstPasswordValue;
}

{
xtype: 'textfield',
fieldLabel: 'Confirm Password',
name: 'ConfirmPassword',
labelAlign: 'top',
cls: 'field-margin',
flex: 1,
vtype: 'password',
firstPasswordFieldName: 'Password'
}