Confirm password validator ExtJs 4 - extjs4

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;
},

Answer 2

Change Ext.form.VTypes to Ext.form.field.VTypes. And try to remove quotes around 'Ext.form.field.VTypes'. E.g.:
Ext.apply(Ext.form.field.VTypes, {
password : function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
}

Answer 3

The solution is to remove quotes around 'Ext.form.field.VTypes'
Ext.apply(Ext.form.field.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'
});