ExtJS ComboBox - displaying "Any" in the the field when All Items are selected

Question

I do have a ComboBox component in ExtJS which I am using as a filter.

User can select multiple items (multiSelect : true). When the values are selected, they are correctly shown in the field. When no item is selected, the value from emptyText property is shown.

Now, is there a simple way how to define the text for the case when all the options are selected? Something like allSelectedText?

This is a simple definition of ComboBox:

Ext.create('Ext.form.ComboBox', {
    multiSelect: true,
    fieldLabel: "Select item",
    emptyText: "Please select",
    store: Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data: [
            {"id": "1","name": "Item 1"}, 
            {"id": "2","name": "Item 2"},
            {"id": "3","name": "Item 3"}
        ]}),
    queryMode: 'local',
    displayField: 'name',
    valueField: 'id',
    renderTo: Ext.getBody(),
});

This is how it looks now:

This is what I would like to see:

I have managed to interact with the label (next to the field) but I can't find easy way how to change the contents of the input element.

Here is the jsFiddle : http://jsfiddle.net/84dj8/

Many Thanks

Answer 1

After spending ages on this - here is a simple solution

Ext.define('AnySelectedCombo', {
   extend: 'Ext.form.ComboBox',
   alias: 'widget.anyselectedcombo',
   cls: "cst-filter",
   allSelectedText: "All", // default

   getDisplayValue : function() {
      // Check if all items are selected
      if (this.getStore() && this.value && (this.value.length > 0) && (this.getStore().getCount() == this.value.length)) {
        return this.allSelectedText;
      }
      // Otherwise return as normally
      return this.callParent(arguments);
   }
});

JS Fiddle here: http://jsfiddle.net/84dj8/9/

Answer 2

There are no easy way to do this, but it's possible to create small workaround:

listeners: {
    'select': function(cmp, rec){
        var store = cmp.getStore(),
            values = cmp.getValue();

        if(store.getCount() == values.length) {
            cmp.setValue('All');                  
        }
    }
}

http://jsfiddle.net/84dj8/1/