Mersoft Corporation Blog

I ran into an issue where I needed to use the onChange event for a Combobox and it was not working as expected. It only worked when the value was selected from the dropdown. This posed a problem for me since I was not forcing the user to make a selection – they can enter in text manually.

I found this fix on the EXTJS forum, however the fix did not work when the user entered in their own value into the combo box.

To resolve this I changed 2 lines of code from the fix I found.

I modified…

this.startValue = this.getValue();

to

this.startValue = this.getRawValue();

and

var v = this.getValue();

to

var v = this.getRawValue();

So here is the entire code for the updated fix…

Ext.override(Ext.form.Field, {
 onFocus : function() {
 if (!Ext.isOpera) { // don't touch in Opera
 this.el.addClass(this.focusClass);
 }
 if (!this.hasFocus) {
 this.hasFocus = true;
 this.startValue = this.getRawValue();
 this.fireEvent("focus", this);
 }
 },

 onBlur : function() {
 this.beforeBlur();
 this.el.removeClass(this.focusClass);
 this.hasFocus = false;
 if (this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur") {
 this.validate();
 }
 var v = this.getRawValue();
 if (String(v) !== String(this.startValue)) {
 this.fireEvent('change', this, v, this.startValue);
 }
 this.fireEvent("blur", this);
 }
 });

I hope this helps someone out there who may be having the same problem I had.