ExtJS 4 - Combo Box blur event getting fired twice_问答_开发者

ExtJS 4 - Combo Box blur event getting fired twice

开发者 https://www.devze.com 2023-04-12 13:11 出处：网络

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.

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?