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 multibo.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 (bo) {
            var values = Ext.get(bo.hiddenDataEl.dom.lastChild).dom.value;
            values = values.split(",");
            Ext.each(values, function (value, i) {
                values[i] = parseInt(value);
            });
            bo.setValue(values);
            Ext.get(bo.getInputId()).dom.value = values.length + ' selected';
        },
        select: function (bo, values) {
            if (values[values.length - 1].data.id === parseInt(item.getAttribute('not-applicable'))) {
                bo.setValue(parseInt(item.getAttribute('not-applicable')));
            } else {
                var notApplicable = -1;
                var newValues = bo.getValue();
                if ((notApplicable = bo.getValue().indexOf(parseInt(item.getAttribute('not-applicable')))) != -1) {
                    newValues.splice(notApplicable, 1);
                }
                bo.setValue(newValues);
            }
            Ext.get(bo.hiddenDataEl.dom.lastChild).dom.value = bo.getValue().join(',');
            optionsSelected = bo.getValue();
            Ext.get(bo.getInputId()).dom.value = optionsSelected.length + ' selected';
        },
        change: function (bo) {
            if (item.getAttribute('required') == 'true') {
                if (bo.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
                $('#' + bo.getInputId()).keyup();
            }
        }

    }
});

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 multibo.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 (bo) {
            var values = Ext.get(bo.hiddenDataEl.dom.lastChild).dom.value;
            values = values.split(",");
            Ext.each(values, function (value, i) {
                values[i] = parseInt(value);
            });
            bo.setValue(values);
            Ext.get(bo.getInputId()).dom.value = values.length + ' selected';
        },
        select: function (bo, values) {
            if (values[values.length - 1].data.id === parseInt(item.getAttribute('not-applicable'))) {
                bo.setValue(parseInt(item.getAttribute('not-applicable')));
            } else {
                var notApplicable = -1;
                var newValues = bo.getValue();
                if ((notApplicable = bo.getValue().indexOf(parseInt(item.getAttribute('not-applicable')))) != -1) {
                    newValues.splice(notApplicable, 1);
                }
                bo.setValue(newValues);
            }
            Ext.get(bo.hiddenDataEl.dom.lastChild).dom.value = bo.getValue().join(',');
            optionsSelected = bo.getValue();
            Ext.get(bo.getInputId()).dom.value = optionsSelected.length + ' selected';
        },
        change: function (bo) {
            if (item.getAttribute('required') == 'true') {
                if (bo.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
                $('#' + bo.getInputId()).keyup();
            }
        }

    }
});

• javascript
• extjs
• bobox
• extjs4
• multi-select

Share Improve this question Follow edited Aug 21, 2013 at 12:51 Darin Kolev 3,4091313 gold badges3333 silver badges4747 bronze badges asked Jul 25, 2012 at 13:50 ajibarraajibarra 5811 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 bo'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',
});

Also this may help:

getDisplayValue: function() {
            return (this.displayTplData.length > 1) ? this.displayTplData.length + ' selected' : this.displayTplData[0].name;
        },