1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    7
    Vote Rating
    0
    dubaut is on a distinguished road

      0  

    Default Adding styles to GXT3 elements

    Adding styles to GXT3 elements


    I have a major problem with styling GXT3 in general which I try to explain with an example:

    Let's say I have a BorderLayoutContainer and I want to change the background color. What I did is´:

    Code:
    BorderLayoutContainer con = new BorderLayoutContainer();
    con.addStyleName("custom-blc-style");
    In may CSS file (which I included in the EntryPoint HTML page after the reset.css) I added

    Code:
    .custom-blc-style { background: green; }
    According to Fierfox' "Insepct Element" the DIV's style is "div.GB2UA-DDGSB.custom-blc-style".

    Checking the styles I see that my style ".custom-blc-style" has been overridden by some inline style named ".GB2UA-DDGSB".

    What did I wrong?

    Thanks,
    Hannes

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    276
    Vote Rating
    9
    branflake2267 will become famous soon enough

      0  

    Default


    The appearance is overriding the style. One of the ways to override an individual widget appearance is to instantiate the widget with an overridden appearance.

    Find the blue or gray theme and copy the default style like the default styles for the `BorderLayoutAppearance`:
    Code:
    /* CustomBorderLayout.css file */
    .container {
      background-color:#996600;
      border: 1px blue solid;
    }
    
    
    .child {
    }
    Start by overriding the default appearance like this with the `BorderLayoutAppearance`:
    Code:
    import com.google.gwt.core.client.GWT;
    import com.sencha.gxt.theme.base.client.container.BorderLayoutBaseAppearance;
    
    public class CustomBorderLayoutAppearance extends BorderLayoutBaseAppearance {
      public interface CustomBorderLayoutResources extends BorderLayoutResources {
        // Link a custom css stylesheet. 
        @Override
        @Source({"CustomBorderLayout.css"})
        public CustomBorderLayoutStyle css();
      }
    
      public interface CustomBorderLayoutStyle extends BorderLayoutStyle {}
    
      public CustomBorderLayoutAppearance() {
        super(GWT.<CustomBorderLayoutResources> create(CustomBorderLayoutResources.class));
      }
    }
    * Example of programmatically overriding an individual container's appearance.
    Code:
    public void onModuleLoad() {
      // Instantiate the custom appearance for the GXT widget.
      BorderLayoutAppearance overrideAppearance = new CustomBorderLayoutAppearance();
      
      // Initialize the BorderLayoutContainer with the custom appearance
      BorderLayoutContainer container = new BorderLayoutContainer(overrideAppearance);
      
      RootPanel.get().add(container);
    }
    More docs and guides coming soon here: http://docs.sencha.com/gxt-guides/3/

    Brandon

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar