Ext.ux.BetterCombo (Combo Change Event)

[mcurrey]

I don't have the privileges to post to the premium forum, but I encountered the same problem as many others, mentioned here:
http://extjs.com/forum/showthread.php?t=39871

That is, the ComboBox 'change' event would be more useful in many situations if it fired as soon as the value in the ComboBox changes, instead of not until the ComboBox is blurred.

It's also not clear if the User Extensions site above is official, or what the process is, or if everything here has been moved there. Unfortunately I don't have time to read through a 13 page thread to determine that, but thought this would be helpful to folks. Anyone can feel free to post this uber-simple extension there, if appropriate.

The following extension to ComboBox fires the "change" event immediately after the "select" event, if the value has changed. No need to blur the field.


/**
* @class Ext.ux.BetterComboBox
* @extends Ext.form.ComboBox
* Fires "change" event at time of actual change, instead of just before/during blur
* @author mcurrey
*/
Ext.ux.BetterComboBox = Ext.extend(Ext.form.ComboBox, {

initComponent : function(){
Ext.ux.BetterComboBox.superclass.initComponent.call(this);
},

initEvents : function(){
Ext.ux.BetterComboBox.superclass.initEvents.call(this);
this.on('select', this.onBetterSelect, this);
},

// named this way to not interfere with Ext.form.ComboBox.onSelect()
onBetterSelect : function(record, index){
var v = this.getValue();
if(String(v) !== String(this.startValue)){
this.fireEvent('change', this, v, this.startValue);
}
}

});
Ext.reg('bettercombo', Ext.ux.BetterComboBox);

[mystix]

does your extension still fire the change event on blur?

[mcurrey]

Yes, I didn't disable any of the default/parent ComboBox's behavior, and that's a good thing to note, thank you. For me, it didn't matter whatsoever that the change event still fires on blur, since all I'm currently doing is enabling a Save button once the combo's value has changed.

[rtconner]

Should probably leave change as it was, and add a new event (so it's backwards compatible with combobox), perhaps livechange or somesuch.

It's probably not a good idea to have the event fire twice.

[mjlecomte]

You might just want to do an overide and just use http://extjs.com/deploy/dev/docs/?class=Function&member=createSequence from the default select method to piggy back your change? Would probably be more compact.