Hybrid View

  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
    377
    Vote Rating
    15
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi