Extjs combobox: hide selected value from dropdown list

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

default combobox behaviour

I want the list of values look like this:

enter image description here

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.

Edit Report

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 itsel

answered 2012-09-06T07:19:05.650

Extjs combobox: hide selected value from dropdown list

1 Answer

Your Answer