在Ext JS中过滤Comboboxes

时间:2013-09-12 14:43:55

标签: javascript extjs combobox filter

我在我的应用程序中使用ExtJS的组合框构建了一个查询构建器。

当用户从组合框中选择一个字段进行搜索时,他可以选择添加两个以上的组合框来缩小搜索范围。

我的组合框的商店有六个项目 - 当用户选择这六个项目中的一个时,如果他添加另一个组合框,则该特定项目不可用于选择。

我在想的是将组合框存储放入变量并以某种方式删除第一个值,然后将其加载到新添加的组合框中。

这可以做任何简单的方法吗?

干杯!

修改

我已经做了这个例子,使问题更容易理解

enter image description here

1 个答案:

答案 0 :(得分:1)

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]
    });

});