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.


Code:
<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

combo_blur.jpg