如何在ExtJS多选ComboBox中按退格/删除键取消选中项

要让ExtJS的多选ComboBox在可编辑区域按下退格或删除键时取消选中项，可以通过监听键盘事件手动处理选中项的移除逻辑，以下是具体实现：

核心逻辑 #

监听ComboBox的keyup事件，当输入框内容为空时，判断按下的是退格（keyCode 8）或删除（keyCode 46）键，然后移除最后一个选中的项（和TagField默认行为一致）。

代码示例 #

Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    fieldLabel: '多选下拉框',
    store: ['选项1', '选项2', '选项3', '选项4'],
    multiSelect: true,
    editable: true,
    listeners: {
        keyup: function(combo, e) {
            var keyCode = e.getKey();
            // 仅在输入框为空时处理退格/删除键
            if ((keyCode === e.BACKSPACE || keyCode === e.DELETE) && combo.inputEl.getValue().trim() === '') {
                var selectedValues = combo.getValue();
                if (selectedValues && selectedValues.length > 0) {
                    // 移除最后一个选中项
                    selectedValues.pop();
                    combo.setValue(selectedValues);
                    // 阻止默认行为，避免退格键触发页面后退
                    e.preventDefault();
                }
            }
        }
    }
});

额外说明 #

• 如果需要删除当前聚焦的选中项（而非最后一个），由于多选ComboBox默认不会为选中项提供单独焦点，需要额外实现选中项的高亮、聚焦监听逻辑，复杂度会更高
• 代码中通过combo.inputEl.getValue().trim()判断输入框是否为空，确保只有在没有输入内容时才触发选中项移除

内容的提问来源于stack exchange，提问作者Tesla