ExtJS 4 - Combo Box blur event getting fired twice

Question

I have a simple combobox with a blur event. The blur event has an alert called for testing purpose currently.

The issue is that this blur event gets fired twice as following:

If the cursor is in this combobox and user presses 'tab' key due to which the combo-box looses focus -> blur event gets fired.
Once the combobox has lost the focus, if a user clicks using mouse anywhere on screen then the blur event gets fired again.

Is there anyway this blur event can be made to fire only once?

Following is the full code I am using:

<html>
    <head>
        <title>Test Page</title>
         <link rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css">
         <script type="text/javascript" src="ext-4.0.2a/bootstrap.js"></script>

         <script type='text/javascript'>

            Ext.onReady(function(){

                Ext.define("Post", {
                    extend: 'Ext.data.Model',
                    fields: [
                        {name: 'id', mapping: 'post_id'},
                        {name: 'title', mapping: 'topic_title'},
                        {name: 'topicId', mapping: 'topic_id'},
                        {name: 'author', mapping: 'author'},
                        {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
                        {name: 'excerpt', mapping: 'post_text'}
                    ]
                });

                ds = Ext.create('Ext.data.Store', {
                    pageSize: 10,
                    proxy: {
                        type: 'jsonp',
                        url : 'http://www.sencha.com/forum/topics-remote.php',
                        reader: {
                            type: 'json',
                            root: 'topics',
                            totalProperty: 'totalCount'
                        }
                    },
                    model: 'Post'
                });

                panel = Ext.create('Ext.panel.Panel', {
                    renderTo: Ext.getBody(),
                    title: 'Search the Ext Forums',
                    width: 600,
                    bodyPadding: 10,
                    layout: 'anchor',
                    items: [{
                        xtype: 'combo',
                        store: ds,
                        displayField: 'title',
                        fieldLabel:'Blur Test',
                        listeners:{
                            blur:function(){
                                alert('1');
                            }
                        }
                    }, {
                        xtype: 'component',
                        style: 'margin-top:10px',
                        html: 'Live search requires a minimum of 4 characters.'
                    }]
                });
            });
         </script>
    </head>
    <body>

    </body>
</html>

Thanks for help in advance.

PS: I am using ExtJS version 4.0.2a and have checked this behavior in Firefox, IE9 and IE8. All of them are firing event twice. But when checked in Chrome then the event gets fired only once.

jsfiddle.net/ZkqP8 I can't seem to replicate the problem. What browser and version of ExtJS 4 are you using? — rwilliams
Thanks for the post RWilliams. I have updated my question with the version and browser details. Also, I checked the fiddle link shared by you and there I found that the blur event is not getting fired even once. Is it firing only once in your case? For me, it didn't fire at all at the fiddle link. — netemp
I know you're using ExtJS version 4 but is it 4.0.2, 4.0.2a, 4.0.6 etc etc — rwilliams
It's firing for me just fine. I didn't use an alert like you did as it's considered bad juju for javascript debugging. You'll have to use firebug or chrome's or IE's javascript consoles to see it fire. — rwilliams
Can you provide more of your ExtJS code? It's possible you might be binding multiple blur events to that combo. — rwilliams

phatskat phatskat · Accepted Answer · 2012-02-05T06:46:20

One (VERY TERRIBLE) option is to create a variable to track your blurred count:

var AlreadyBlurred = false; //Obviously you want to put this somewhere NOT global

Next you can do this in your listeners object:

listeners: {
    blur: function (){
        if(!AlreadyBlurred)
        {
            // Do your code here
        }
        AlreadyBlurred = !AlreadyBlurred;
    }
}

Again, this is a very terrible idea as it likely masks a problem either in your code or in Ext itself. Upgrading to 4.0.7 doesn't seem to help (the latest version on jsfiddle shows this to still happen). Why fire on the blur event, out of curiosity? Could you do it on change or select instead for the desired outcome?

ExtJS 4 - Combo Box blur event getting fired twice

1 Answers