title: extjs background color of panel not working
body: <p>how do I make the background of the main panel a certain color?
  I have tried a few things and it looks like one of my components is in front of.</p>
  
  <p>Its basically the background of MainDetailsPanel that I want to change color but it looks like every object is in front of and blocking.</p>
  
  <p>Any thoughts?</p>
  
  <pre><code>Ext.define('ExtApplication1.view.clientdetails.clientdetails',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.clientdetails',
    itemId: 'clientDetailsItemID',
    reference: 'clientDetailsPanel',
    id: 'clientDetailsViewID',
  
    requires: [
      'ExtApplication1.view.clientdetails.clientdetailsController',
      'ExtApplication1.view.clientdetails.clientdetailsModel'
    ],
  
    controller: 'clientdetails-clientdetails',
  
    viewModel: { type: 'clientdetails-clientdetails' },
  
    //ui: 'dark',
    //frame: true,
  
    //bodyStyle: {
    //    'background-image': 'linear-gradient(#3a3535, #333333)',
    //    padding: '10px'
    //},
  
    //ui: 'darkbackground',
    bodyStyle: { "background-color": "yellow" },
  
    layout: {
      type: 'vbox',
      pack: 'start',
      align: 'stretch'
    },
  
    items: [{
      layout: 'column',
      height: 80,
      bodyStyle: { "background-color": "red" },
      items: [{
        columnWidth: .4,
        items: [{
          layout: 'column',
          defaults: {
            layout: 'form',
            xtype: 'container',
            style: 'width: 50%;'
          },
          items: [{
            items: [{
              xtype: 'displayfield',
              fieldLabel: 'Client',
              bind: { value: '{selectedClientListModel.ClientName}'},
              fieldStyle: 'padding: 0px; margin: 0px;',
              labelStyle: 'padding: 0px; margin: 0px;'
              //ui: 'dark'
            },{
              xtype: 'displayfield',
              fieldLabel: 'Acct Desc',
              itemId: 'textfieldAcctDesc',
              bind: { value: '{selectedManager.AcctShortCode}' },
              fieldStyle: 'padding: 0px; margin: 0px;',
              labelStyle: 'padding: 0px; margin: 0px;'
            },{
              xtype: 'displayfield',
              fieldLabel: 'Acct Num',
              itemId: 'textfieldAcctNum',
              bind: { value: '{selectedManager.AcctNum}' },
              fieldStyle: 'padding: 0px; margin: 0px;',
              labelStyle: 'padding: 0px; margin: 0px;'
            }]
          },{
            items: [{
              xtype: 'displayfield',
              fieldLabel: 'Client P&amp;L',
              id: 'displayfieldClientPL',
              itemId: 'displayfieldClientPLItemId',
              fieldStyle: 'padding: 0px; margin: 0px;',
              labelStyle: 'padding: 0px; margin: 0px;',
              renderer: function (value) {                                           
                var newVal = Ext.util.Format.currency(value, '$ ', 0);
                if (value &gt; 0) {
                  newVal = '&lt;span style="color:green"&gt;' + newVal + '&lt;/span&gt;';
                } else if (value &lt; 0) {
                  newVal = '&lt;span style="color:red"&gt;' + newVal + '&lt;/span&gt;';
                } else {
                  newVal = newVal;
                }
                return newVal;
              }
            },{
              xtype: 'displayfield',
              fieldLabel: 'Account P&amp;L',
              itemId: 'displayfieldAccountPL',
              fieldStyle: 'padding: 0px; margin: 0px;',
              labelStyle: 'padding: 0px; margin: 0px;',
              renderer: function (value) {
                var newVal = Ext.util.Format.currency(value, '$ ', 0);
                if (value &gt; 0) {
                  newVal = '&lt;span style="color:green"&gt;' + newVal + '&lt;/span&gt;';
                } else if (value &lt; 0) {
                  newVal = '&lt;span style="color:red"&gt;' + newVal + '&lt;/span&gt;';
                } else {
                  newVal = newVal;
                }
                return newVal;
              }
            }]
          }]
        }]
      }]  
    }]
  })        
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/MPjPk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MPjPk.jpg" alt="enter image description here"></a></p>