Geek Answers Handbook

ExtJS 4 - Combo Box blur event that fires twice

I have a simple combination with a blur event. The blur event has a warning that is currently for testing.

The problem is that this blur event fires twice:

  • If the cursor is in this combo box and the user presses the tab key, due to which the combo box loses focus → the blur event is triggered.

  • After the combo box has lost focus, if the user clicks the mouse button anywhere on the screen, the blur event is triggered again.

In any case, this blur event can only be executed once?

Below is the complete code that 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 the help in advance.

PS: I am using ExtJS version 4.0.2a and have tested this behavior in Firefox, IE9 and IE8. They all shoot twice. But when it is installed in Chrome, the event is fired only once.

+4
source share
1 answer

One (VERY TERRIBLE) option is to create a variable to track the blurry score:

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

Then you can do this in your listeners object:

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

Again, this is a very scary idea, as it probably masks the 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 that this will happen anyway). Why shoot at blur, out of curiosity? Could you do this when changing or choose the desired result instead?

0
source

More articles:


All Articles