3

我有一个带有多个 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();
            }
        }

    }
});
4

2 回答 2

3

我不确定我是否遵循所有事件处理程序的情况（所以我可能会遗漏一些东西），但实现您在上面第一句话中描述的最简单方法是为组合提供您自己的实现getDisplayValue方法。这是在文档中。

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

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',
});
于 2012-07-25T16:38:47.387 回答
2

这也可能有帮助：

getDisplayValue: function() {
            return (this.displayTplData.length > 1) ? this.displayTplData.length + ' selected' : this.displayTplData[0].name;
        },
于 2014-05-21T09:48:40.883 回答