Force the store to load only those values which are not selected inside Multiselect combo selection-EXTJS

Question

I'm using EXTJs 3.4 and I have an issue around loading the multi combo values, ON EDIT page I want to check what values have been selected inside a multiselect and not load those values in the dropdown options.

like below, the "SouthIndia" option was preloaded/saved while creating the item and hence now I'm expecting that it should not show up in the dd as it already has been selected.

Is there a way I can let know the store of what values to populate?

multiselect = new Qx.form.MultiSelectComboBox({
        allowCommaInQuery: true,
        anchor: '0',
        name: "multiselect",
        displayField: 'value',
        valueField: 'value',
        hideRefreshLabel: true,
        refreshable: false,
        mode: 'local',
        emptyText: $L('Select'),
        enableCopyPaste: false,
        anyMatch: true,
        caseSensitive: false,
        width: 170,
        cacheSizes: false,
        hidden: true,
        disabled: true,
        allowBlank: false,
        store: multiComboVpc = new Ext.data.ArrayStore({
            fields: ['value'],
            data: values,
            expandData: true
        })

    }),

    Ext.extend($cls, Panel, {
        afterRender: function() {
            this.multiComboVpc.setValue("SouthIndia") //values coming from server
        }
    });
var values = ["SouthIndia"]

now in this case my dropdown should be empty, how can I achieve this?

Answer 1

Steps

1. get the selected values from the combo

2. loop through the selected values and use store.find as

var idx = store.find(fieldName, value, [startIndex], [anyMatch], [caseSensitive]);

where idx is the index of first matching record in the store

3. Get the record by using the above index

   var removeRecord = store.getAt(idx);

4. Now remove the matched record from store

store.remove(removeRecord);