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＆＃39;工具栏 - 红色＆＃39;。