ExtJS

Question

我正在使用 ExtJS 7.3.1 的现代工具包，当 multiSelect 选项设置为 true 时，我发现组合框样式中有一个奇怪的行为。我创建了一个带有两个组合框的简单 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 添加了一个 chipview，以允许在行中添加多选项目。

旁注

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

ExtJS - 组合框多选填充

ExtJS - Combobox Multiselect padding

javascript

css

sass

extjs7