Following code has been created using examples:


Code:
Ext.onReady(function(){
	Ext.create('Ext.form.Panel', {
		title: 'Simple Form',
		width: 350,
		url: 'save-form.php',
		layout: 'anchor',
		defaults: {
			anchor: '100%'
		},
		defaultType: 'textfield',
		items: [{
			fieldLabel: 'First Name',
			validateOnBlur:true,//calling validator on blur
			validateOnChange:false,//not calling validator on blur
			validator:function(){
				console.log('in validator');//printing to console whenever validator is called
				return true;
			}
		}],
		renderTo: Ext.getBody()
	});
});

In the code, validateOnBlur is set to true where as validateOnChange is set to false.


The issue is that when user focusses the field for the first time and blurs out, then the validator function gets fired twice as shown in the screenshot attached.

If the user agains focusses the field second time, and blurs, then the validator gets fired only once and same is true for all the subsequent such actions.


But for the first time, when user focusses the field and blurs (either by mouse click or tab out) then the validator function gets fired twice.


Could anyone guide that what can be the possible reason behind this and how can this be stopped?


Thanks in advance

validator.jpg