View Full Version : Combobox: hide selected value from dropdown list

4 Sep 2012, 3:50 AM
Hi everyone!

I'm surprised this hasn't been asked previously, but is there a way I can hide currently selected value from combo's dropdown list?

Currently the combobox works like this (taken from the docs example):


If 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 I want it to be like this:

Is there an easy way to do this? I would play around with combobox' store filters but there seems to be no easy way to add another filter to the ones that are already there (used for "live search").

Anybody ever thought of this?
Thanks in advance.

6 Sep 2012, 2:00 AM
So far StackOverflow seems to be more helpful:
Extjs combobox: hide selected value from dropdown list

(http://stackoverflow.com/questions/12266713/extjs-combobox-hide-selected-value-from-dropdown-list/12294840#12294840)I was suggested a solution that remove()'s the selected record in the 'select' event handler and pushes it into internal variable for later restoring (see the linked thread).

But then I came up with an even simpler way: just hiding the selected list item via CSS:

.x-boundlist-selected {
display: none;

Here's the custom combobox class with mentioned functionality that can be toggled via the hideActive

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,

* Internal method that creates the BoundList
createPicker: function() {
var picker = this.callParent(arguments);

// honor the hideActive flag
if(this.hideActive) {

return picker;

.x-boundlist-hideactive .x-boundlist-selected {
display: none;

Anybody sees any potential problems with this approach?