Clay Banks
Clay Banks

Reputation: 4581

Filtering Comboboxes in Ext JS

I have built a query builder using ExtJS's comboboxes in my application.

When a user selects a field from the combobox to search on, he has the option to add up to two more comboboxes to narrow his search.

The store of my comboboxes has six items - when the user selects one of those six items, that particular item should not be available to select if he adds on another combobox.

What I was thinking was placing the comboboxes store into a variable and somehow removing the first value, then loading it into the newly added combobox.

Any simple way this can be done?

Cheers!

EDIT

I have made this illustration to make the question simpler to understand

enter image description here

Upvotes: 0

Views: 435

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30082

Ext.require('*');

Ext.define('KeyValue', {
    extend: 'Ext.data.Model',
    fields: ['id', 'value']
})

Ext.onReady(function() {

    var options = [{
        id: 1,
        value: 'One'
    }, {
        id: 2,
        value: 'Two'
    }, {
        id: 3,
        value: 'Three'
    }, {
        id: 4,
        value: 'Four'
    }, {
        id: 5,
        value: 'Five'
    }, {
        id: 6,
        value: 'Six'
    }];

    var parent = new Ext.form.field.ComboBox({
        store: {
            model: KeyValue,
            data: options
        },
        forceSelection: true,
        editable: false,
        displayField: 'value',
        valueField: 'id',
        queryMode: 'local',
        listeners: {
            select: function(cmb, records) {
                var selected = records[0],
                    store = child.getStore(),
                    rec;

                rec = store.getById(selected.getId());
                store.remove(rec);
            }
        }
    });

    var child = new Ext.form.field.ComboBox({
        store: {
            model: KeyValue,
            data: options
        },
        forceSelection: true,
        editable: false,
        displayField: 'value',
        valueField: 'id',
        queryMode: 'local'
    });

    new Ext.form.Panel({
        width: 400,
        renderTo: document.body,
        items: [parent, child]
    });

});

Upvotes: 1

Related Questions