extjs面板背景颜色不起作用

Question

如何让主面板的背景变成某种颜色？ 我尝试了一些东西，看起来我的一个组件就在前面。

它基本上是MainDetailsPanel的背景，我想改变颜色，但看起来每个对象都在前面和阻塞。

有什么想法吗？

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&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 > 0) {
                newVal = '<span style="color:green">' + newVal + '</span>';
              } else if (value < 0) {
                newVal = '<span style="color:red">' + newVal + '</span>';
              } else {
                newVal = newVal;
              }
              return newVal;
            }
          },{
            xtype: 'displayfield',
            fieldLabel: 'Account P&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 > 0) {
                newVal = '<span style="color:green">' + newVal + '</span>';
              } else if (value < 0) {
                newVal = '<span style="color:red">' + newVal + '</span>';
              } else {
                newVal = newVal;
              }
              return newVal;
            }
          }]
        }]
      }]
    }]  
  }]
})