0

In my extJs 6.5 project, I am trying to change the background color of a toolbar. This is only for 1 component and can't seem to figure out the best way with cls or ui. Can someone show me how to change background color?

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"
            }
        ]
    }
]

});

enter image description here

enter image description here

solarissf
  • 1,199
  • 2
  • 23
  • 58

1 Answers1

0

In your Menu.scss file add a ui with

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

Then on your toolbar simply add the ui 'toolbar-red'.

etchesketch
  • 821
  • 4
  • 14
  • I tried and its adding a light blue background. It seems to be a lighter shade the the main color of the entire application. so this red must not be being picked up... any ideas? – solarissf Sep 29 '17 at 15:05
  • using chrome tools I found the existing color is coming from the attached picture i put above... .x-body { color: #bd2222; font-size: 13px; line-height: 17px; font-family: helvetica, arial, verdana, sans-serif; background: #d08f87 – solarissf Sep 29 '17 at 15:27
  • I'm a little confused by the screenshot since that is showing the body tag not the element for the toolbar. The DOM element for the toolbar should have an id like 'ext-toolbar-1' or something similar. You are right though the ui should overwrite any styling. – etchesketch Sep 29 '17 at 18:30