Advanced password confirmation with ExtJS4

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

// Add the additional 'advanced' VTypes
    Ext.apply(Ext.form.field.VTypes, {
        
        password: function(val, field) {
            if (field.initialPassField) {
                var pwd = field.up('form').down('#' + field.initialPassField);
                return (val == pwd.getValue());
            }
            return true;
        },

        passwordText: 'Passwords do not match'
    });

    /*
     * ================  Password Verification =======================
     */

    var pwd = Ext.create('Ext.FormPanel', {
        renderTo: Ext.getBody(),
        frame: true,
        title: 'Password Verification',
        bodyPadding: '5px 5px 0',
        width: 350,
        fieldDefaults: {
            labelWidth: 125,
            msgTarget: 'side',
            autoFitErrors: false
        },
        defaults: {
            width: 300,
            inputType: 'password'
        },
        defaultType: 'textfield',
        items: [
            {
                fieldLabel: 'Password',
                name: 'pass',
                allowBlank: false,
                id: 'pass',
                listeners: {
                    change: function(field) {
                        var confirmField = field.up('form').down('[name=pass-cfrm]');
                        confirmField.validate();
                    }
                }
            },
            {
                fieldLabel: 'Confirm Password',
                name: 'pass-cfrm',
                vtype: 'password',
                allowBlank: false,
                initialPassField: 'pass' // id of the initial password field
            }
        ]
    });