Results 1 to 3 of 3

Thread: Change background color of ContentPanel Header

  1. #1

    Default Change background color of ContentPanel Header

    Hello guys,

    I would like to programmatically change the background color of my custom ContentPanel Header. I have successfully extended the default ContentPanel with the following code.
    The header background color is correctly set to #DFE8A7 (CSS class .header).
    Now I would like to change it's color by setting another css class (.yellow).

    I tried it with
    Code:
    @UiField
    DABContentPanelLight boxKontoInfos;
    boxKontoInfos.getHeader().setStyleName("yellow", true);
    boxKontoInfos.setStyleName("yellow", true);
    But unfortunately this does not adapt the correct DOM element as you can see in the image.

    dom.JPG

    Actually I would like to add "yellow" to "KO-com-elaxy-theme-dab-client-panel-DABContentPanelAppearance2-DABContentPanelStyle2-header" to change the background color. How can I achieve this? Additionally, I do not see the "yellow" class content in Firebug.
    Can somebody help me/give me some code hints?

    Regards, Steven

    Code:
    import com.google.gwt.core.client.GWT;
    import com.sencha.gxt.theme.base.client.panel.ContentPanelBaseAppearance;
    import com.sencha.gxt.theme.base.client.widget.HeaderDefaultAppearance;
    
    
    public class DABContentPanelAppearance2 extends ContentPanelBaseAppearance {
      
      public interface DABContentPanelResources2 extends ContentPanelResources {
    
    
        @Source({"com/sencha/gxt/theme/base/client/panel/ContentPanel.css", "DABContentPanelLight.css"})
        @Override
        DABContentPanelStyle2 style();
      }
        
      public interface DABContentPanelStyle2 extends ContentPanelStyle {
        String yellow();
        String pink();
      }
      
      public DABContentPanelAppearance2() {
        this(GWT.<DABContentPanelResources2> create(DABContentPanelResources2.class));
      }
    
    
      public DABContentPanelAppearance2(DABContentPanelResources2 resources) {
        super(resources, GWT.<ContentPanelTemplate> create(ContentPanelTemplate.class));
      }
      
      @Override
      public HeaderDefaultAppearance getHeaderAppearance() {
        return new DABHeaderAppearance2();
      }
      
    
    
    }
    My custom ContentPanelLight:

    Code:
    import com.elaxy.theme.dab.client.panel.DABContentPanelAppearance2;
    import com.google.gwt.core.client.GWT;
    import com.sencha.gxt.widget.core.client.ContentPanel;
    
    
    public class DABContentPanelLight extends ContentPanel{
      
      public DABContentPanelLight() {
        this(GWT.<DABContentPanelAppearance2>create(DABContentPanelAppearance2.class));
      }
        
      public DABContentPanelLight(DABContentPanelAppearance2 appearance) {
        super(appearance);
      }
      
    }
    My DABHeaderAppearance2:

    Code:
    /**
     * Sencha GXT 3.0.1 - Sencha for GWT
     * Copyright(c) 2007-2012, Sencha, Inc.
     * [email protected]
     *
     * http://www.sencha.com/products/gxt/license/
     */
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.resources.client.ClientBundle;
    import com.sencha.gxt.theme.base.client.widget.HeaderDefaultAppearance;
    
    
    public class DABHeaderAppearance2 extends HeaderDefaultAppearance {
      
      public interface DABHeaderStyle extends HeaderStyle {
        String header();
    
    
        String headerIcon();
    
    
        String headerHasIcon();
    
    
        String headerText();
    
    
        String headerBar();
      }
    
    
      public interface DABHeaderResources extends HeaderResources, ClientBundle {
        @Source({"DABHeaderLight.css"})
        DABHeaderStyle style();
      }
      
      public DABHeaderAppearance2() {
        this(GWT.<DABHeaderResources> create(DABHeaderResources.class), GWT.<Template> create(Template.class));
      }
    
    
      public DABHeaderAppearance2(HeaderResources resources, Template template) {
        super(resources, template);
      }
    
    
    }


    In my DABContentPanelLight.css I have

    Code:
    .panel {
      border-style: solid;
      border-width: 0;
      outline: 0 none;
    }
    
    
    .body {
      background-color: #F7F7F7;
      border-bottom: 1px solid;
      border-left: 1px solid;
      border-right: 1px solid;
      border-top: 0 none;
      border-color: #d0d0d0;
    }
    .header{
      background-color: #DFE8A7;
    }
    
    
    .yellow{
      background-color: #FFED3D !important;
    }
    
    
    .pink{
      background-color: #FF0FD2 !important;

  2. #2
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    49

    Default

    I have something similar but instead of adding to the css on the appearance, I have it separately in an interface extending ClientBundle. I call panel.getHeader().addStyleName and pass in the referenced style and it works fine. If you want to do it via the appearance you may need to change how you're referencing the style.

  3. #3
    Sencha User
    Join Date
    Feb 2014
    Location
    Quezon City, Philippines
    Posts
    111

    Default

    How about:

    Code:
    a) boxKontoInfos.getHeader().addClass('header');
    b) boxKontoInfos.getHeader().addCls('header');

Posting Permissions

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