extjs6 Hintergrund von 1 Werkzeugleiste ändern

Question

In meinem extJs 6.5 Projekt versuche ich die Hintergrundfarbe einer Werkzeugleiste zu ändern. Dies ist nur für 1 Komponente und kann nicht den besten Weg mit Cls oder ui herauszufinden. Kann mir jemand zeigen, wie ich die Hintergrundfarbe ändern kann?

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

In Ihrer Menu.scss Datei ein ui mit

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

dann auf der Symbolleiste fügen Sie einfach den ui 'toolbar-rot' hinzuzufügen.