javascript-如何更改ExtJs组合框中的显示消息？

我有一个具有多个true的ExtJs组合框,我想在输入字段上显示“选择的X值”,而不是“值1,值2,值3”.我尝试使用选择侦听器,但是当我将值设置为输入字段,然后调用multicombo.getValue()时,它将从输入字段获取值.我需要从valueField(隐藏的输入)中获取值.

我的代码：

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();
            }
        }

    }
});

解决方法:

我不确定我是否会遵循所有事件处理程序的操作(因此我可能会遗漏一些东西),但是实现您在上面第一句话中所描述的内容的最简单方法是为组合程序提供自己的实现getDisplayValue方法. Here它在文档中.

只需将其设置为返回选择多少个值的计数即可.这是一个例子：

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

标签：extjs,combobox,extjs4,multi-select,javascript
来源： https://codeday.me/bug/20191101/1980671.html