Extjs下拉框多选 回显

在 Extjs 中，可以通过设置 `multiSelect` 属性为 `true` 来实现下拉框多选。回显则需要先获取到下拉框组件的值，然后将其赋值给需要回显的表单元素。

例如，在以下代码中，我们创建了一个下拉框组件，设置了 `multiSelect` 为 `true`，并将其添加到了表单中。当用户选择完选项后，点击保存按钮时，我们可以获取到下拉框的值，然后将其赋值给一个隐藏的表单元素，以便在下一次打开表单时进行回显。

Ext.create('Ext.form.Panel', {
    title: 'My Form',
    items: [{
        xtype: 'combo',
        fieldLabel: 'Choose Options',
        multiSelect: true,
        store: ['Option 1', 'Option 2', 'Option 3'],
        displayField: 'name',
        valueField: 'value'
    }, {
        xtype: 'hidden',
        name: 'selectedOptions' // 隐藏表单元素，用于回显
    }],
    buttons: [{
        text: 'Save',
        handler: function() {
            var form = this.up('form').getForm();
            var selectedOptions = form.findField('selectedOptions');
            var combo = form.findField('combo');
            var value = combo.getValue();
            selectedOptions.setValue(value); // 将下拉框的值赋值给隐藏表单元素
            form.submit({
                success: function() {
                    Ext.Msg.alert('Success', 'Form submitted successfully.');
                },
                failure: function() {
                    Ext.Msg.alert('Error', 'Form submission failed.');
                }
            });
        }
    }]
});

在打开表单时，我们需要先获取到隐藏元素的值，然后将其赋值给下拉框组件。代码如下：

var form = Ext.create('Ext.form.Panel', {
    title: 'My Form',
    items: [{
        xtype: 'combo',
        fieldLabel: 'Choose Options',
        multiSelect: true,
        store: ['Option 1', 'Option 2', 'Option 3'],
        displayField: 'name',
        valueField: 'value'
    }, {
        xtype: 'hidden',
        name: 'selectedOptions',
        value: ['Option 1', 'Option 2'] // 设置隐藏表单元素的初始值，用于回显
    }]
});

var selectedOptions = form.getForm().findField('selectedOptions').getValue();
var combo = form.getForm().findField('combo');
combo.setValue(selectedOptions); // 将隐藏表单元素的值赋值给下拉框组件