ExtJS - 组合框多选填充

Question

我正在使用 ExtJS 7.3.1 的 Modern Toolkit，当 multiSelect 选项设置为 true 时，我发现 Combobox 样式中有一个奇怪的行为。我创建了一个带有两个组合框的简单 ExtJS 应用程序。它们之间的唯一区别是，一个将 multiSelect 选项设置为 true，而另一个将其设置为 false。我在下面包含了这个简单应用程序的代码。

    Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.form.Panel', {
            fullscreen: true,
            items: [{
                xtype: 'fieldset',
                items: [{
                    xtype: 'combobox',
                    label: 'State',
                    id: 'firstLabel',
                    name: 'stateMulti',
                    multiSelect: true,
                    displayField: 'name',
                    valueField: 'abbr',
                    store: [
                        { abbr: 'AL', name: 'Alabama' },
                        { abbr: 'AK', name: 'Alaska' },
                        { abbr: 'AZ', name: 'Arizona' }
                    ]
                },
                 {
                    xtype: 'combobox',
                    label: 'State',
                    id: 'secondLabel',
                    name: 'stateSingle',
                    multiSelect: false,
                    displayField: 'name',
                    valueField: 'abbr',
                    store: [
                        { abbr: 'AL', name: 'Alabama' },
                        { abbr: 'AK', name: 'Alaska' },
                        { abbr: 'AZ', name: 'Arizona' }
                    ]
                }]
            }]
        });
    }
   });

运行此应用程序后，当 multiSelect 选项设置为 true 时，我看到标签中有一个小填充，如下图所示。有没有办法覆盖这种行为？我觉得这与用于多选组合框的现代工具包的风格有关，但我不确定。任何帮助将不胜感激。

Answer 1

将modern - material 添加到您的 CSS

.x-selectfield .x-chipview .x-chipview-body-el {
    padding: 0;
}

不同的是，ExtJS 添加了一个芯片视图，以允许在一行中添加多选项目。

旁注

对于多选，我强烈建议使用 ExtJS 7.5，因为第一项的重复错误已修复。