Extjs组合框:从下拉列表中隐藏选定的值

Question

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

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

我希望值列表看起来像这样:

在我的情况下,组合框是不可编辑的(即你不能输入任意值),我认为显示所选值两次没有多大意义:一次在输入字段中,一次在下拉列表中.我已经看到了所选内容,我希望下拉列表只显示我可以选择的其他选项.

到目前为止,我没有看到一个简单的方法来做到这一点.可能最好的起点是过滤组合框存储,但组合框架使用自己的过滤器进行实时搜索功能.

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

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

这个例子完全没有经过考验.但是由于存储主要绑定到BoundList,而BoundList没有直接连接到文本字段,因此这应该可行.你在这里做一些缓存.

Answer 2

我最终使用了@sra解决方案的修改版本：

Ext.define('My.ComboBox',  {
    extend: 'Ext.form.field.ComboBox',

    /**
     * @cfg {Boolean} hideActive=true
     * When true, hides the currently selected value from the dropdown list
     */
    hideActive: true,

    /**
    * @private {Ext.data.Model[]} selectedRecords
    * A Array of selected records, used when hideActive is true
    */

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

        this.callParent();
    },


    setValue: function(value, doSelect) {
        var store = this.store;

        if(this.hideActive) {
            store.suspendEvents(false);
            // write the current selected back to the store (you need to suspend autoSync if active)
            // do this BEFORE callParent so the currently selected record would be found in the store
            store.add(this.selectedRecords);
        }

        this.callParent(arguments);

        if(this.hideActive) {
            // set the selected as new recordlist
            this.selectedRecords = this.valueModels;
            // remove the selected from the store
            store.remove(this.valueModels);
            store.resumeEvents();
            store.fireEvent('refresh', store);
        }

        return this;
    }

});

“隐藏”逻辑是相同的，只是我在setValue方法中执行它，以确保它在以编程方式设置组合的值时也有效，包括使用值初始化组合框的情况。

UPD另外，看起来必须在之前store.add(this.selectedRecords);调用，否则如果我们尝试两次设置相同的值，组合框会表现得很奇怪（它根本找不到存储中的活动记录，因为我们删除了它，所以它会重置为空白）。我暂停商店的事件，以防止组合框在对选定记录进行操作的过程中尝试与其下拉列表同步而引起一些怪癖，并在完成后手动触发商店的事件，以便列表最终得到更新。这可能会对性能产生影响，但到目前为止我不知道更好的解决方案。 this.callParent(arguments);'refresh'