extjs - extjs6 更改 1 个工具栏的背景

Question

在我的 extJs 6.5 项目中，我正在尝试更改工具栏的背景颜色。这仅适用于 1 个组件，似乎无法找出 cls 或 ui 的最佳方式。有人可以告诉我如何更改背景颜色吗？

Ext.define('App.view.menu.Menu', {
extend: 'Ext.panel.Panel',

xtype: 'app-menu',
controller: 'menu',
itemId: 'menuItemID',

requires: [
    'App.view.menu.MenuController'
],



dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'left',
        cls: 'app-menu',
        //ui: 'mainmenuTest',
        //ui: 'dark',

        style: 'padding: 0; margin: 0;',
        items: [
            {
                xtype: 'combobox',
                itemId: 'comboboxClientItemID',
                emptyText: 'Select Client...',
                editable: false,
                displayField: 'clientName',
                valueField: 'clientName',
                bind: {
                    store: '{myClientListStore}',
                    selection: '{selectedClientListModel}'
                },
                listeners: {
                    select: 'onComboboxSelect'
                },
                queryMode: "local"
            }
        ]
    }
]

});

Answer 1

在您的 Menu.scss 文件中添加一个 ui

@include toolbar-ui(
    $ui: 'toolbar-red',
    $background-color: #ff0000 // your background color here
);

然后在您的工具栏上简单地添加 ui 'toolbar-red'。