ExtJS 4 - 组合框模糊事件被触发两次答案

【问题标题】：ExtJS 4 - Combo Box blur event getting fired twiceExtJS 4 - 组合框模糊事件被触发两次
【发布时间】：2011-10-13 09:07:56
【问题描述】：

我有一个带有模糊事件的简单组合框。 blur 事件当前有一个为测试目的调用的警报。

问题是这个模糊事件被触发两次，如下所示：

如果光标在此组合框中，并且用户按下“tab”键，组合框失去焦点 -> 模糊事件被触发。
一旦组合框失去焦点，如果用户使用鼠标单击屏幕上的任意位置，则会再次触发模糊事件。

这个模糊事件是否只能触发一次？

以下是我正在使用的完整代码：

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

提前感谢您的帮助。

PS：我使用的是 ExtJS 版本 4.0.2a，并在 Firefox、IE9 和 IE8 中检查了此行为。他们都两次触发事件。但是当在 Chrome 中检查时，该事件只会被触发一次。

【问题讨论】：

jsfiddle.net/ZkqP8 我似乎无法复制这个问题。您使用的是什么浏览器和 ExtJS 4 版本？
感谢 RWilliams 的帖子。我已经用版本和浏览器详细信息更新了我的问题。另外，我检查了你共享的小提琴链接，我发现模糊事件甚至没有被触发一次。在你的情况下它只触发一次吗？对我来说，它根本没有在小提琴链接上触发。
我知道你使用的是 ExtJS 版本 4，但它是 4.0.2、4.0.2a、4.0.6 等等
它对我来说很好。我没有像你那样使用警报，因为它被认为是 JavaScript 调试的坏 juju。您必须使用 firebug 或 chrome 或 IE 的 javascript 控制台才能看到它触发。
你能提供更多你的 ExtJS 代码吗？您可能会将多个模糊事件绑定到该组合。

标签： events extjs combobox extjs4 blur

【解决方案1】：

一个（非常糟糕）选项是创建一个变量来跟踪您的模糊计数：

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

接下来您可以在 listeners 对象中执行此操作：

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

同样，这是一个非常糟糕的想法，因为它可能掩盖了您的代码或 Ext 本身中的问题。升级到 4.0.7 似乎没有帮助（jsfiddle 上的最新版本显示这种情况仍然会发生）。出于好奇，为什么要触发 blur 事件？您可以在更改或选择时进行更改以获得所需的结果吗？

【讨论】：