CODEWITHSUNDEEP
extjscomboboxextjs5
Krishnalal P
Krishnalal P

Reputation: 487

Extjs : Selecting same value in multiselect combo not removing value

I am using ext5 multiselect combo. If we select a value from the dropdown, say 'Other' and click outside to cancel the dropdown. Now the value 'Other' will be shown in combo. Again click the dropdown and select tha same value 'Other', it should remove 'Other' from its values. But rather it adds same value once again.

Here is the image: My code is given below:

        xtype: 'combo',
        emptyText: 'Retail BI',
        name: 'chainRefId',
        store: Ext.create('shared.store.filter.ChainRefs'),
        displayField: 'name',
        multiSelect: true,
        valueField: 'chain_ref_id',
        listeners: {
            expand: function(){                 
                this.getStore().load();    
            },
            change: function(combo, newVal) {
                if (!combo.eventsSuspended) {
                    var storeCombo = Ext.ComponentQuery.query('combo[name=storeId]')[0];
                    storeCombo.getStore().removeAll();
                    storeCombo.setValue(null);
                    var chainCombo = Ext.ComponentQuery.query('combo[name=chainId]')[0];
                    chainCombo.getStore().removeAll();
                    chainCombo.setValue(null);                          
                }
            }
        }

Is there a solution for this? Thanks in advance.

Upvotes: 1

Views: 2166

Answers (2)

Nandeesh
Nandeesh

Reputation: 43

I have faced the same problem. I have provided a workaround for this. This fix holds good for tagfield too.

//on combo store load event
load: function () {
    // I am assuming reference to combo
    var rawVal = combo.getValue(); 
    // If combo is multiselct, getValue returns an array of selected items.
    // When combo is configured as remote, everytime it loads with new records and therefore removes the old reference.
    // Hence, do setValue to set the value again based on old reference.
    combo.setValue(rawVal);
    // Here you can see, based on old reference of selected items, the drop down will be highlighted.
}

Upvotes: 0

Greendrake
Greendrake

Reputation: 3734

Your combo's store gets reloaded on each expand. Technically the record corresponding to the value you selected the first time disappears on the second store load, so the removing logic does not "see" it and therefore leaves it in the field.

Remove this: 

expand: function(){                 
    this.getStore().load();    
}

and just use autoLoad: true on the store.

Upvotes: 0

Related Questions