Question

I want to add a simple validator to verify that “password” and “confirm password” are equal, here is the code :

Ext.apply('Ext.form.VTypes',{
password : function(val, field) {
    if (field.initialPassField) {
        var pwd = Ext.getCmp(field.initialPassField);
        return (val == pwd.getValue());
    }
    return true;
},

passwordText : 'Passwords do not match'
});
var genders = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
    {"abbr":"AL", "name":"Male"},
    {"abbr":"AK", "name":"Female"}        
]
});

//****************************************
Ext.define('AM.view.user.Inscription', {
    extend: 'Ext.form.Panel',
    alias: 'widget.inscription',
    title: 'Formulaire',
    fieldDefaults: {
        labelAlign: 'right',
        msgTarget: 'side'
    },
      items: [{
        xtype: 'container',
        anchor: '100%',
        layout:'column',
        items:[{
                xtype:'textfield',
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false,
                anchor:'40%',
                //maxLength : '10'
            },{
                xtype:'textfield',
                fieldLabel: 'Last Name',
                name: 'last',
                allowBlank:false,
                anchor:'40%'
            },{
                    xtype:'textfield',
                inputType: 'password',
                fieldLabel:'Password',
                name:'pass',
                id : 'pass',
                allowBlank:false,
                anchor:'40%'
            },{
                xtype:'textfield',
                inputType: 'password',
                fieldLabel:'Confirm Password',
                name:'confirmPass',
                allowBlank:false,
        vtype : 'password',
        initialPassField : 'pass',
        //autoRender : true,
                anchor:'40%'
            }]
        },{
            xtype: 'container',
            columnWidth:.5,
            layout: 'anchor',
            items: [{
                xty pe:'combobox',
                fieldLabel: 'Sexe',
                store: genders,
                queryMode: 'local',
                displayField: 'name',
                allowBlank : false,
                name: 'gender',
                editable : false,
                anchor:'30%',

            },{
                xtype:'textfield',
                fieldLabel: 'N° Téléphone',
                name: 'phone',
                allowBlank:false,
                anchor:'40%'
            }]
        }]
    }],

    buttons: [{
        text: 'Save'
    },{
        text: 'Reset'
    },{
        text: 'Cancel'
    }]
});

whene I start write in the confirm password textfield I get this in chrome developer tool :
Uncaught TypeError: Object [object Object] has no method 'password'

can someone tell me what I miss here ? thank you at advance.

UPDATE

the application is an MVC application and this file (the code above) is in View folder, and I’m calling this view in the app.js like this :

 Ext.require([
'Ext.panel.*',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.layout.container.Table'
]);
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
    'Users'
],
launch: function() {
   Ext.create('Ext.container.Viewport', {
       layout : 'auto',
       //layout : 'vbox',
       renderTo: document.body,
        items: [{
            xtype : 'usertoolbar',
        },{  
            html : '<br><br>' 
        },{
            xtype: 'inscription',
        },{
            xtype: 'userlist',
    }]
    });
  }
});

Also any notes about my methodology of structuring code are welcome

Answer 1

Change Ext.form.VTypes to Ext.form.field.VTypes in the first line. See if it helps.

Update: change your validate function to:

password : function(val, field) {
    console.log(val, field);
    if (field.initialPassField) {
        var pwd = Ext.getCmp(field.initialPassField);
        console.log(pwd);
        return (val == pwd.getValue());
    }
    return true;
},