ExtJS -组合框多选填充

kadbb459  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(185)

我使用的是ExtJS 7.3.1的Modern Toolkit,当 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时,我发现标签中有一个小的填充,如下图所示。有什么方法可以覆盖此行为吗?我觉得这与Modern Toolkit的多重选择组合框风格有关,但我不确定。如有帮助,将不胜感激。

rmbxnbpk

rmbxnbpk1#

将for modern - material添加到CSS

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

不同的是,ExtJS添加了一个chipview,允许在行中添加多选项。

旁注

对于多选,我强烈建议使用ExtJS 7.5,因为第一个项目的重复错误在那里得到了修复。

相关问题