Extjs combobox: hide selected value from dropdown list

Question

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):

Answer 1

I came up with another solution that looks even simpler and a quick testing reveals no side effects:

We can leave Combobox logic untouched but simply hide the selected item via CSS:

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

And voila, we don't see the selected item! Don't know how reliable this would be in production code but still worth considering, I think...

---

UPDATE. Here is the complete solution if you want to control this behavior via config flag of Combobox:

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) {
        picker.addCls('x-boundlist-hideactive');
      }

      return picker;
    }
});

Somewhere in your CSS:

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

---

UPDATE 2. Found a UI problem with my approach!

Hiding the selected item from the dropdown list introduces a quirk to keyboard navigation: though the element is visually hidden, it still exists and Ext will select it when you press UP/DOWN keys. Visually that means that the your selection will disappear at some point and you will have to press UP/DOWN one more time to get it back on the next visible element.

So far I was unable to find an easy fix for this. My best bet would be to modify itemSelector of the bound list (which is a Data View), setting it to something like .x-boundlist-item:not(.x-boundlist-selected) so the selected element doesn't make it into the query.

While the selector itself works, it doesn't solve the problem because the View performs this selector query before any additional classes (including the selected item class) get applied to items (this happens in Ext.view.AbstractView.refresh().

Also, this solution causes misplacement of the dropdown list when it appears above the combobox!

I had a feeling that my approach was way too easy to work flawlessly :)