ExtJS7.3.1 Modern工具包多选Combobox标签padding异常如何解决

问题原因 #

ExtJS 7.3.1 Modern Toolkit 中开启multiSelect: true的Combobox默认会为输入容器增加额外的上下padding，用于容纳选中的选项标签，所以会出现和单选Combobox标签对齐、高度不一致的情况。

解决方案 #

方案1：全局覆盖所有多选Combobox样式

在项目全局样式文件中加入以下CSS规则：

.x-field-select.x-multiselect .x-field-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* 如需和单选Combobox高度完全对齐，可替换为对应单选组件的min-height数值，比如min-height: 32px !important */
    min-height: unset !important;
}

方案2：仅修改指定多选Combobox样式

如果不想影响全局组件，给需要调整的多选Combobox添加自定义类名：

{
    xtype: 'combobox',
    label: 'State',
    id: 'firstLabel',
    name: 'stateMulti',
    multiSelect: true,
    cls: 'no-extra-padding-multiselect', // 新增自定义类名
    displayField: 'name',
    valueField: 'abbr',
    store: [
        { abbr: 'AL', name: 'Alabama' },
        { abbr: 'AK', name: 'Alaska' },
        { abbr: 'AZ', name: 'Arizona' }
    ]
}

再添加对应的CSS规则：

.no-extra-padding-multiselect .x-field-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: unset !important;
}

注意事项 #

如果业务场景中多选Combobox会同时选中多个选项，取消默认padding后可能导致选中的标签显示不全，可搭配maxSelected: N配置限制最多选中数量，或开启选中数量折叠显示的配置使用。

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