Question

我有一个具有多个true的ExtJs Combobox，我想在输入字段上显示“X values selected”而不是“Value 1，Value 2，Value 3”。我尝试使用select监听器，但是当我将值设置为输入字段然后调用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();
            }
        }

    }
});

Answer 1

我不确定我是否跟踪了所有事件处理程序的内容（所以我可能会遗漏某些内容），但实现上述第一句中所描述内容的最简单方法是提供自己的实现对于组合的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',
});

Answer 2

这也可能有所帮助：

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

如何更改ExtJs Combobox中的显示消息？

2 个答案: