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?

score 29 · Accepted Answer · edited Jan 10 '13 at 05:55

29

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.

edited Jan 10 '13 at 05:55

phatskat

1,797
1
15
32

answered May 14 '12 at 11:47

Aurimas

770
9
14

2

Nice one! It's the most elegant solution I've come this far – Carlos Valenzuela Aug 21 '12 at 17:13
4

You can use the event's parameters too - `addListener('change', function(me, newVal) { if(newVal === null) { me.reset(); } });` – phatskat Jan 10 '13 at 05:50
1

Note: if your ComboBox has `multiSelect: true`, do not do `newValue === null`, do `newValue.length === 0` instead (because it will obviously be an array of selections). – XåpplI'-I0llwlg'I - Jan 30 '13 at 16:43
1

Thanks for this. Minor optimization: No need to call getValue() since newValue is supplied (as the second param) to the 'change' handler. – David Easley May 14 '15 at 10:44
1

NOTE: combo.reset() actually "Resets the current field value to the originally-loaded value". So this workaround is broken if the originally-loaded value isn't blank. – David Easley May 18 '15 at 14:06
@DavidEasley Add `this.lastSelection = [];` after reset() method call. It will clear the field if it is loaded with a value. – Awesome Aug 17 '15 at 02:16

Reza Salarmehr · Answer 2 · 2014-06-09T15:59:46.587

Use the following as your base combobox:

Ext.define("Ext.ux.CleanableComboBox", {
    extend: "Ext.form.ComboBox",
    xtype: 'c-combobox',
    initComponent: function () {
        this.callParent(arguments);
        if (this.allowBlank) {
            this.addListener('change', function () {
                if (!this.getValue() || this.getValue().length === 0) {
                    this.reset();
                }
            });
        }
    }
})

score 1 · Answer 3 · answered Feb 21 '12 at 06:11

1

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.

answered Feb 21 '12 at 06:11

Andrey Selitsky

2,584
3
28
42

1

Thank you @innerJL. But I don't think that's an elegant solution. If there are so many optional combobox, then it'll make users busy just to select 'None' option. What I understand about forceSelection is: Choose one from the list or nothing (leave it empty). – Fitrah M Feb 21 '12 at 07:04

score 1 · Answer 4 · answered Feb 21 '12 at 09:11

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.

score 1 · Answer 5 · answered Feb 21 '12 at 18:27

I ran into this problem also.

The combo box always restores the previously selected value.

It isn't so much restoring the value as the user is reselecting it after he deletes the value. I.e: with forceSelection: true the combobox insists on dropping down its menu, this means that when a user goes back into the combobox to delete an item, the combobox menu drops down with the item which was originally selected highlighted, the user then deletes the value in the combobox and tabs to the next one, the combobox looks to see what item is highlighted in the drop down list and fills it in to the field, voila, reselected.

Instead, if the user deletes the value, then presses the ESC key to close the combo drop down menu and then tabs to the next one the value will not fill itself in.

I suppose this is a feature to enable keyboard only control so that you don't have to click to drop down the menu.

Fortunately, I didn't take long for my users to understand this and make use of the ESC key. I also added the preventMark: true config to handle the error message when this occurred.

I suppose if you really can't have this, you could add a listener to the change or even the validitychange event that checks if the field is now empty and then collapses the menu if it is. This should prevent it from reselecting when moving to another field the same way closing it with the ESC key does.

I found that if you delete the value, press the ESC key, and tab to the next field, the combo box still fills in a value using ExtJS 4.1.1a. A change listener is required to make the combo box behave as expected. — Mike Post, Aug 21 '14 at 17:34

Izhaki · Answer 6 · 2013-03-01T18:07:22.417

I believe that if you have both allowBlank and forceSelection set to true, you should really be able to have no selection (or you wouldn't have the allowBlank set to true).

Here's a global MOD for all combo boxes to behave that way.

Ext.onReady(function(){   

    // Allows no selection on comboboxes that has both allowBlank and
    // forceSelection set to true    
    Ext.override( Ext.form.field.ComboBox, {

        onChange: function(newVal, oldVal)
        {
            var me = this;

            if ( me.allowBlank && me.forceSelection && newVal === null )
                me.reset();

            me.callParent( arguments );
        },        

    });
});

Or alternatively, this MOD also closes the picker and fires select event with null when the user empties the field:

Ext.override( Ext.form.field.ComboBox, {

    onKeyUp: function( aEvent ) {
        var me            = this,
            iKey          = aEvent.getKey();
            isValidKey    = !aEvent.isSpecialKey() || iKey == aEvent.BACKSPACE || iKey == aEvent.DELETE,
            iValueChanged = me.previousValue != this.getRawValue();

        me.previousValue = this.getRawValue();

        // Prevents the picker showing up when there's no selection
        if ( iValueChanged &&
             isValidKey &&
             me.allowBlank &&
             me.forceSelection &&
             me.getRawValue() === '' )
        {
            // Resets the field
            me.reset();

            // Set the value to null and fire select
            me.setValue( null );
            me.fireEvent('select', me, null );

            // Collapse the picker
            me.collapse();
            return;
        }                
        me.callParent( arguments );        
    },

});

score 0 · Answer 7 · answered Jun 18 '13 at 18:18

0

In 4.2, you should just override the combobox's assertValue method.

Instead of:

if (me.forceSelection) {

You should put:

if (me.forceSelection && (!Ext.isEmpty(value) || !me.allowBlank)) {

answered Jun 18 '13 at 18:18

jacob

2,762
1
20
49

score 0 · Answer 8 · answered Jul 02 '13 at 04:37

0

Yes I have the same type of combobox, but I use Editable="false" and ForceSelection="true". When I select the value with keyboard and press enter, it select the last value.

answered Jul 02 '13 at 04:37

user2110717

269
4
14

score 0 · Answer 9 · answered Oct 24 '13 at 15:24

try using this. fill in the value of lastSelection=[] into an empty value

     Ext.override(Ext.form.field.ComboBox, {
        onChange : function(newVal, oldVal) {
            var me = this;
             me.lastSelection=[];

            me.callParent(arguments);
        },
    });

score 0 · Answer 10 · answered Mar 28 '14 at 12:33

0

in combo's config add

listeners: {
    'change': function (combo, newValue) {
        if (newValue === null)
            combo.reset();
        }
    }

PS : idea from @aur1mas

answered Mar 28 '14 at 12:33

Haddad

104
1
4

score 0 · Answer 11 · answered Apr 30 '14 at 10:53

0

Try this

listeners:{change:{fn:function(combo, value){combo.clearValue();}}}

answered Apr 30 '14 at 10:53

Ahmed MEZRI

514
1
5
7

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

11 Answers11