PDA

View Full Version : [FIXED-1491] ux.SelectBox select event hitting twice



mdavis6890
6 Jan 2011, 5:41 PM
Test Case:


<script type="text/javascript" src="<?=$extPath?>/examples/ux/SelectBox.js"></script>




var SB = new Ext.ux.form.SelectBox({
mode : 'local',
fieldLabel : 'Customer',
name : 'customer',
renderTo : Ext.getBody(),
store : new Ext.data.ArrayStore({
autoDestroy: true,
storeId: 'myStore',
fields: [
'company'
],
data : [
['3m Co'],
['Alcoa Inc']
]
}),
valueField: 'company',
displayField: 'company',
listeners : {
select : function() {
console.log("TEST");
}
}

});


'select' event is hitting twice for me on 3.3.0 in FF (I haven't tried other browsers)

Any idea why?

Thanks,
Michael

mdavis6890
7 Jan 2011, 8:38 AM
I really thing this is a bug that should be looked at. I posted a very simple test case. Would somebody try it out and let me know if I missed something obvious, or if this is expected behavior?

I did see a few other threads that seemed to be related, but nothing concrete.

Thanks,
Michael

Condor
7 Jan 2011, 8:56 AM
Confirmed. Moving to the Bugs section.

Quick fix:

Ext.override(Ext.ux.form.SelectBox, {
afterRender : function() {
Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
if(Ext.isWebKit) {
this.el.swallowEvent('mousedown', true);
}
this.el.unselectable();
this.innerList.unselectable();
this.trigger.unselectable();
this.innerList.on('mouseup', function(e, target, options) {
if( target.id && target.id == this.innerList.id ) {
return;
}
this.onViewClick();
}, this);
this.mun(this.view, 'containerclick', this.onViewClick, this);
this.mun(this.view, 'click', this.onViewClick, this);

this.innerList.on('mouseover', function(e, target, options) {
if( target.id && target.id == this.innerList.id ) {
return;
}
this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
this.cshTask.delay(this.searchResetDelay);
}, this);

this.trigger.un('click', this.onTriggerClick, this);
this.trigger.on('mousedown', function(e, target, options) {
e.preventDefault();
this.onTriggerClick();
}, this);

this.on('collapse', function(e, target, options) {
Ext.getDoc().un('mouseup', this.collapseIf, this);
}, this, true);

this.on('expand', function(e, target, options) {
Ext.getDoc().on('mouseup', this.collapseIf, this);
}, this, true);
}
});
(But I don't see why afterRender should even be using mouseup instead of click)

mdavis6890
7 Jan 2011, 10:43 AM
This worked on my test page with Firebug. Now I'm going to try building it into an extended class to use.

How did you go about debugging this? I'd like to learn a little more so I can figure this stuff out on my own.

Thanks,
Michael

Condor
7 Jan 2011, 12:00 PM
I put a breakpoint in the onSelect method where the 'select' event is fired and selected an item from the list.

Then I looked at the callstack when the select event was fired and notices that there where two different event handlers (click and mouseup) that caused it to execute.

mdavis6890
7 Jan 2011, 12:57 PM
Awesome, thanks. I'm a little bit new to debugging, but it sounds like once I start investigating breakpoints I'll be well on my way.

And my extended SelectBox class works great, BTW.

Michael

meroy
7 Jan 2011, 2:04 PM
This has been added to SVN (3.3.x branch). Michael, thanks for the report. Condor, I don't know how you do it. Thanks, as always for all you're doing.