PDA

View Full Version : [INFOREQ] Combo-Box blur event getting fired twice



netemp
13 Oct 2011, 4:30 AM
REQUIRED INFORMATION

Ext version tested:

Ext 4.0.2a
Browser versions tested against:

IE8
IE9
FF6
Chrome 14
Description:

Combo-Box 'blur' event gets fired again on mouse click, even when it had already been fired because of using 'tab key' to move cursor out of that combo-box
Steps to reproduce the problem:

Create a form with combo-box inside and write a 'blur' event for this combobox
After selecting a value from the combo-box and click 'tab' -> blur event gets fired
Now click anywhere on webpage using mouse -> blur event gets fired again
The result that was expected:

Blur event should not be fired on mouse click if tab key has already been used
The result that occurs instead:

The blur event gets fired twice
Test Case:



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

evant
13 Oct 2011, 4:43 AM
Can't confirm this, see the attached screen cap: http://screencast.com/t/yXo1rDLXUSu



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'
}]
});

Ext.onReady(function(){

var 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'
});


var panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search the Ext Forums',
width: 600,
bodyPadding: 10,
items: [Ext.create('Ext.form.field.ComboBox', {
store: ds,
displayField: 'title',
fieldLabel: 'Blur Test',
listeners: {
blur: function(){
alert('1');
}
}
})]
});
});


The first alert after a tab, but I don't see an alert after I click.

netemp
13 Oct 2011, 8:49 PM
Can't confirm this, see the attached screen cap: http://screencast.com/t/yXo1rDLXUSu

The first alert after a tab, but I don't see an alert after I click.

Thanks for the quick response Evant. Could you please share the browser you used for testing as its working in Chrome for me too, but giving issues in IE and FF.