PDA

View Full Version : Validator function of one combo firing the validator of other combo too?



netemp
18 Jul 2012, 5:31 AM
Following is a case where a form has two children as combo-boxes.

Both the combos are having a validator function which is called on blur.

The issue is, when the form loads, then by default, the validator of combo1 gets called.

Also, if we blur from combo2 then it along with its own validator, it also calls validator function of combo1 as shown in the screenshot.

Is there something wrong with the code shared in the test case below?

If not, is this a bug or does it have some workaround, as this really becomes an issue when the number of comboboxes are high in a screen.




<html>
<head>
<title>FORTH PORTS</title>
<link rel='stylesheet' href='resources/extjs/resources/css/ext-all.css' />
<script type='text/javascript' src='resources/extjs/ext-all-dev.js'></script>
<script type='text/javascript'>

//Defining the model for combos
Ext.define('States', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'abbr'},
{type: 'string', name: 'name'}
]
});

//Following function returns the form config object
function getForm(){

//Defining the stores below
var statesObj1 = Ext.create('Ext.data.Store', {
model: 'States',
proxy: {
type: 'ajax',
url: 'combo_stores_dynamic1.php',
reader: {
type: 'json'
}
}
});
var statesObj2 = Ext.create('Ext.data.Store', {
model: 'States',
proxy: {
type: 'ajax',
url: 'combo_stores_dynamic2.php',
reader: {
type: 'json'
}
}
});

//Defining the form below
var form = {
xtype:'form',
title:'Form',
items:[
{
xtype:'combo',
store: statesObj1,
width:200,
fieldLabel:'Combo1',
labelWidth:100,
labelAlign:'right',
displayField:'name',
valueField:'abbr',
validateOnBlur:true,//Calling validator on blur
validateOnChange:false,//Not calling validator on change
validator:function(){
console.log('validator 1 xtype');//Writing to console when validator of this combo is called
}
},
{
xtype:'combo',
store: statesObj2,
width:200,
fieldLabel:'Combo 2',
labelWidth:100,
labelAlign:'right',
displayField:'name',
valueField:'abbr',
validateOnBlur:true,//Calling validator on blur
validateOnChange:false,//Not calling validator on change
validator:function(){
console.log('validator 2 xtype');//Writing to console when validator of this combo is called
}
}
]
};
return form;
}//EOF

Ext.onReady(function() {
new Ext.Viewport({
layout:'fit',
items:[
getForm()//Calling the form here
]
});
});
</script>
</head>
<body></body>
</html>



Thanks for any help in advance.

PS: ExtJs version 4.1

37277