Results 1 to 2 of 2

Thread: extjs background color of panel not working

  1. #1
    Sencha User
    Join Date
    Feb 2016
    Posts
    33
    Answers
    1

    Default extjs background color of panel not working

    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.

    Its basically the background of MainDetailsPanel that I want to change color but it looks like every object is in front of and blocking.
    Any thoughts?


    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,  //html: 'Hello, World from client details!!',  //bodyStyle: { //    'background-image': 'linear-gradient(#3a3535, #333333)', //    padding: '10px' //},  //ui: 'darkbackground', bodyStyle: { "background-color": "yellow" },  layout: {     type: 'vbox',     pack: 'start',     align: 'stretch' },  items: [     {         //xtype: 'panel',         layout: 'column',         height: 80,         bodyStyle: { "background-color": "red" },         items: [             {                 //title: 'Column 1',                 //width: 120,                 columnWidth: .4,                 items: [                     {                         layout: 'column',                         defaults: {                             layout: 'form',                             xtype: 'container',                             //defaultType: 'textfield',                             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',                                     //id: 'displayfieldAccountPL',                                     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;                                     }                                 }                             ]                         }]                     }                 ]             },
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    You should be able to do that with the bodyStyle config:
    http://docs.sencha.com/extjs/6.0/6.0...-cfg-bodyStyle

Similar Threads

  1. Field background color change not working in ST2.2
    By WagsMax in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 15 May 2013, 3:13 PM
  2. Replies: 4
    Last Post: 8 Oct 2012, 9:20 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •