EXT JS 4: EMPTY VALUE IN A COMBOBOX

Often, in an Ext JS combobox, it is difficult to go back to an empty value once you have selected an item, particularly if “forceSelection” is set to true.  Here is my roundup of alternative solutions found from around the web…

1. Override beforeBlur

The solution from  http://www.sencha.com/forum/showthread.php?182119-How-To-Re-Empty-ComboBox-when-forceSelection-is-Set-To-TRUE overrides beforeBlur on the combbox to clear out lastSelection.  Here is a copy of the override from the thread:

1 2 3 4 5 6 7 8 9 10 11 12 13

Ext.create('Ext.form.field.ComboBox', {     ...     allowBlank: true,     forceSelection: true,     beforeBlur: function(){         var value = this.getRawValue();         if(value == ''){             this.lastSelection = [];         }

        this.doQueryTask.cancel();

       this.assertValue();

    }

});

Or to apply the override to all combo boxes:

1 2 3 4 5 6 7 8 9 10

Ext.require("Ext.form.field.ComboBox", function () {     Ext.override(Ext.form.field.ComboBox, {         beforeBlur: function () {             if (this.getRawValue().length === 0) {                 this.lastSelection = [];             }             this.callOverridden();         }     }); });

2. Add Clear Trigger

Another solution is to add a ‘clear’ trigger when the combobox has a value.  That solution is found at Combobox Extjs4 – Empty line.

3. ClearButton UX

On a related note, I really like the ClearButton plugin found at Ext.ux.form.field.ClearButton – Small clear button/icon over field.  I use this extensively in one of my applications.  It works well, except you can’t access the clear icon from the keyboard.

4. Empty Row

The other solution is to add an empty row to the data store backing the combobox, usually as the first record.

Version Info:
Ext JS 4.1.1