How To Re-Empty ComboBox when forceSelection is Set To TRUE (ExtJS 4)

Question

I have a combo box with forceSelection config is set to true.

The combo box is optional. It can be empty.

If user choose one of the options and then re-empty the combo box, it doesn't want to be empty.

The combo box always restores the previously selected value.

It's ridiculous. It should be empty when user delete the value.

How to solve this problem? Is there a config that I missed?

Answer 1

I've solved this problem with 'change' listener. Example code snippet

addListener('change', function() {
  if (this.getValue() === null) {
    this.reset();
  }
});

When you delete selected value, the ComboBox value is set to null. So you you could just check for that value & restore the ComboBox value to default one.

Answer 2

could you replace forceSelection with allowEmpty: false? In my view forceSelection is doing completely what it should do - it force user to select something from the list. Another option is to add one extra item in the list - like None for example. So user could select it.

Answer 3

I've also hit the same problem with the combos, and unfortunately the best solution I came up with was a img/button for clearing the selected value, then hooking up the following using jQuery:

        $('#imgId').click(function () { 
            var combo = Ext.getCmp('cmpId');
            combo.setValue(null);
            combo.setRawValue(null);
        });

Not ideal, but I think it's fairly clean and user friendly. Hope it helps.