Extjs 组合框:从下拉列表中隐藏选定的值 [英] Extjs combobox: hide selected value from dropdown list

问题描述

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

I'm using ExtJS 4 and looking for a way I can hide currently selected value from combo's dropdown list?

所以不是这个(Alaska"当前在组合框中选择):

So instead of this ("Alaska" currently selected in combobox):

我希望值列表如下所示:

I want the list of values look like this:

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

In my case the combobox is not editable (i.e. you can't input an arbitrary value), I don't think it makes much sense to display the selected value two times: once in the input field and once in the dropdown list. I already see what is selected, I want the dropdown list to only show me other options I can select.

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

So far I don't see an easy way to do it. Probably the best place to start at is filtering combobox store but combobox uses its own filters for live search functionality.

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

Anybody considered this problem? Am I trying to do something weird? I'm surprised that I haven't been able to find any related topics.

推荐答案

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

I ended up using a modified version of @sra's solution:

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 方法中执行它以确保它在以编程方式设置组合的值时也能工作，包括组合框被初始化的情况价值.

The 'hiding' logic is the same, only I perform it in the setValue method to make sure that it also works when programmatically setting combo's value, including the case where the combobox is initialized with a value.

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

UPD Also, looks like store.add(this.selectedRecords); has to be called before this.callParent(arguments);, otherwise combobox will act weird if we attempt to set the same value twice (it simply wouldn't find the active record in the store cause we removed it, so it'll reset to blank). I suspend store's events to prevent some quirks caused by combobox trying to synchronize with its dropdown list in the middle of my manipulations with selected record(s) and manually trigger store's 'refresh' event when I'm done so the list gets eventually updated. This may have performance impact but so far I don't know a better solution.

这篇关于Extjs 组合框:从下拉列表中隐藏选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！