How to change display message in an ExtJs Combobox?

Question

I have an ExtJs Combobox with multiple true and I want to show "X values selected" on the input field instead of "Value 1, Value 2, Value 3". I tried with select listener but when I set the value to the input field and then you call multicombo.getValue() it takes the value from the input field. I would need something like take the value from the valueField (a hidden input).

My code:

var multiCombo = Ext.create('Ext.form.field.ComboBox', {
    renderTo: item.id,
    multiSelect: true,
    displayField: 'name',
    editable: false,
    valueField: 'id',
    emptyText: 'Select',
    hiddenName: 'data[Model][' + item.getAttribute('question-id') + '][value]',
    submitValue: true,
    inputType: 'hidden',
    value: selectedOptions,
    width: 300,
    store: store,
    queryMode: 'local',
    listeners: {
        expand: function (combo) {
            var values = Ext.get(combo.hiddenDataEl.dom.lastChild).dom.value;
            values = values.split(",");
            Ext.each(values, function (value, i) {
                values[i] = parseInt(value);
            });
            combo.setValue(values);
            Ext.get(combo.getInputId()).dom.value = values.length + ' selected';
        },
        select: function (combo, values) {
            if (values[values.length - 1].data.id === parseInt(item.getAttribute('not-applicable'))) {
                combo.setValue(parseInt(item.getAttribute('not-applicable')));
            } else {
                var notApplicable = -1;
                var newValues = combo.getValue();
                if ((notApplicable = combo.getValue().indexOf(parseInt(item.getAttribute('not-applicable')))) != -1) {
                    newValues.splice(notApplicable, 1);
                }
                combo.setValue(newValues);
            }
            Ext.get(combo.hiddenDataEl.dom.lastChild).dom.value = combo.getValue().join(',');
            optionsSelected = combo.getValue();
            Ext.get(combo.getInputId()).dom.value = optionsSelected.length + ' selected';
        },
        change: function (combo) {
            if (item.getAttribute('required') == 'true') {
                if (combo.getValue().length == 0) {
                    question.findParentNode('li', 1, true).addCls("is_required");
                } else {
                    question.findParentNode('li', 1, true).removeCls("is_required");
                }
                //There is no ExtJs equivalent for this
                $('#' + combo.getInputId()).keyup();
            }
        }

    }
});

egerardus egerardus · Accepted Answer · 2012-07-25T16:38:47

I'm not sure that I follow what is going on with all of the event handlers (so I may be missing something), but the simplest way to achieve what you described in your first sentence above is to provide your own implementation for the combo's getDisplayValue method. Here it is in the docs.

Just set it up to return a count of how many values are selected. Here's an example:

var multiCombo = Ext.create('Ext.form.field.ComboBox', {
    renderTo: item.id,
    multiSelect: true,
    displayField: 'name',

    // your own getDisplayValue implementation
    getDisplayValue: function() {
        return multiCombo.value.length + ' values selected';
    },

    editable: false,
    valueField: 'id',
    emptyText: 'Select',
    hiddenName: 'data[Model][' + item.getAttribute('question-id') + '][value]',
    submitValue: true,
    inputType: 'hidden',
    value: selectedOptions,
    width: 300,
    store: store,
    queryMode: 'local',
});

How to change display message in an ExtJs Combobox?

2 Answers