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

问题描述

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

因此，而不是这（阿拉斯加 in combobox）：

我想要的值列表如下所示：

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

到目前为止，看到一个简单的方法来做到。可能最好的地方是过滤组合框商店，但combobox使用自己的过滤器进行实时搜索功能。

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

解决方案

@ sra的解决方案的修改版本：

  Ext.define（'My.ComboBox'，{
 extend： Ext.form.field.ComboBox'，
 
 / ** 
 * @cfg {Boolean} hideActive = true 
 *为true时，从下拉列表中隐藏当前选定的值
 * / 
 hideActive：true，
 
 / ** 
 * @private {Ext.data.Model []} selectedRecords 
 *当hideActive为true时使用的所选记录
 * / 
 
 initComponent：function（）{
 this.selectedRecords = []; 
 
 this.callParent （）; 
}，
 
 
 setValue：function（value，doSelect）{
 var store = this.store; 
 
 （this.hideActive）{
 store.suspendEvents（false）; 
 //将当前选择的内容写回商店（如果活动，需要挂起autoSync）
 //在此之前调用所以当前选择的记录将在商店中找到
 store.add（this.selectedRecords）; 
} 
 
 this.callParent（arguments）; 
 
 if（this.hideActive）{
 //设置为新记录列表
 this.selectedRecords = this.valueModels; 
 //从存储中删除所选内容
 store.remove（this.valueModels）; 
 store.resumeEvents（）; 
 store.fireEvent（'refresh'，store）; 
} 
 
返回这个; 
} 
 
}）; 
  

隐藏逻辑是一样的，只有在 setValue 方法，以确保它也可以通过编程方式设置组合的值，包括使用值初始化组合框的情况下工作。

strong> UPD 此外，看起来像 store.add（this.selectedRecords）; 必须在 this.callParent（arguments）; ，否则如果我们尝试将相同的值设置两次，combobox将会很奇怪（它只是在商店中找不到活动记录因为我们删除它，所以它会重置为空白）。
我暂停存储的事件，以防止在我选择的记录的操作过程中，combobox尝试与其下拉列表同步引起的一些怪癖，并手动触发存储的'refresh'事件，当我完成这样的列表最终更新。这可能会有性能影响，但到目前为止我不知道一个更好的解决方案。

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

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.

解决方案

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

});

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 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屋！