javascript - Extjs 组合框 : hide selected value from dropdown list

Question

我正在使用 ExtJS 4 并寻找一种方法可以从组合的下拉列表中隐藏当前选定的值？

所以不是这个(“阿拉斯加”当前在组合框中选择):

我希望值列表如下所示:

在我的例子中，组合框不可编辑(即您不能输入任意值)，我认为将所选值显示两次没有多大意义:一次在输入字段和一次在下拉列表中。我已经看到选择的内容，我希望下拉列表只显示我可以选择的其他选项。

到目前为止，我还没有找到一种简单的方法来做到这一点。可能最好的起点是过滤组合框商店，但组合框使用自己的过滤器来实现实时搜索功能。

有人考虑过这个问题吗？我想做一些奇怪的事情吗？ 我很惊讶我找不到任何相关主题。

Answer 1

我不认为你在这里有太多选择......也许你可以做这样的事情:

Ext.define('Your.company.Combo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.specialcombo',

    /**
    * @cfg {boolean} hideActive
    * True to hide any selected record. Defaults to <tt>true</tt>.
    */
    hideActive: true,

    /**
    * @private {Ext.data.Model[]} hideActive
    * A Array of selected records.
    */


    initComponent: function () {
        this.selectedRecords = [];

        this.callParent(arguments);

        this.on('select', this.onSelectionChange, this);
    },

    /**
    * @private onChangeSelection
    * eventhandler selections
    */
    onSelectionChange: function (me, recs) {
        if(!me.hideActive)
            return;
        // write the current selected back to the store (you need to suspend autoSync if active)
        me.store.add(me.selectedRecords);
        // set the selected as new recordlist
        me.selectedRecords = recs;
        // remove the selected from the store
        me.store.remove(recs);
    }
});

该示例完全未经测试。但是由于商店主要绑定(bind)到不直接连接到文本字段的 BoundList，所以这应该可以工作。您正在此处进行某种缓存。