Hybrid View

  1. #1
    Ext GWT Premium Member
    Join Date
    Oct 2007
    Posts
    37
    Vote Rating
    3
    acerberus is on a distinguished road

      0  

    Default Simple Horizontal Flow Layout

    Simple Horizontal Flow Layout


    Hi,

    I just spent two hours trying to figure out a seemingly simple thing. I wanted to layout widgets dynamically into rows, where each row can hold multiple widgets. The problem is, I do not necessarily know the size of the widgets and the way they are layed-out. I started off with an outer VeritcalLayoutContainer and and multiple inner HBoxLayoutContainers. This however does not work if the widget to be put into the HBoxLayoutContainer is not properly sized.

    Anyways, in the end I wrote a container similar to FlowLayoutContainer but which uses floats to layout its children horizontally. So .. here it is.

    Code:
    import com.google.gwt.dom.client.Style.Display;
    import com.google.gwt.dom.client.Style.VerticalAlign;
    import com.google.gwt.user.client.ui.Widget;
    import com.sencha.gxt.widget.core.client.container.FlowLayoutContainer;
    
    public class DwHorizontalFlowLayoutContainer extends FlowLayoutContainer {
    
    	protected VerticalAlign verticalAlign = VerticalAlign.TOP;
    	
    	public DwHorizontalFlowLayoutContainer() {
    		super();
    	}
    	
    	@Override
    	protected void onInsert(int index, Widget child) {
    		super.onInsert(index, child);
    		
    		child.getElement().getStyle().setDisplay(Display.INLINE_BLOCK);
    		child.getElement().getStyle().setVerticalAlign(verticalAlign);
    	}
    	
    	public void setVerticalAlign(VerticalAlign verticalAlign) {
    		this.verticalAlign = verticalAlign;
    	}
    	
    	public VerticalAlign getVerticalAlign() {
    		return verticalAlign;
    	}
    }
    To GXT-Team. I would like to see something like this added to the built-in layout-containers. Any suggestions?

    Cheers
    -acer
    ReportServer - Open Source Web Reporting
    reportserver.datenwerke.net

  2. #2
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    You mean like CssFloatLayoutContainer?

    Also, GXT has Style.Display and Style.Orientation so you don't have to use the GWT counterparts:

    com.sencha.gxt.core.client.Style.Direction
    com.sencha.gxt.core.client.Style.Orientation

  3. #3
    Ext GWT Premium Member
    Join Date
    Oct 2007
    Posts
    37
    Vote Rating
    3
    acerberus is on a distinguished road

      0  

    Default


    Hi,

    I haven't really looked into this but at least for me CssFloatLayoutContainer did not display any of the widgets inside. I assume that at some level it assumes its children to be directly sized.
    ReportServer - Open Source Web Reporting
    reportserver.datenwerke.net

  4. #4
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    I've never had any issue with CssFloatLayoutContainer. If you don't specify a width, it will use the actual width of the widget being added.

    If you're not seeing the widgets at all, something else is going on. Try this example, can you see all 3 widgets?

    Code:
    public class CssFloatLayoutTest implements EntryPoint{
       @Override
       public void onModuleLoad()
       {
          CssFloatLayoutContainer container = new CssFloatLayoutContainer();
          container.add(new TextField());
          container.add(new TextButton("A Button!"));
          container.add(new HTML("A Label!"));
    
    
          ContentPanel cp = new ContentPanel();
          cp.setWidth(500);
          cp.setHeight(500);
          cp.setWidget(container);
    
    
          RootPanel.get().add(cp);
       }
    }

  5. #5
    Ext GWT Premium Member
    Join Date
    Oct 2007
    Posts
    37
    Vote Rating
    3
    acerberus is on a distinguished road

      0  

    Default


    Try adding something in an HBoxLayoutContainer. It will not be displayed. The difference is that HBoxLayoutContainer uses an absolute layout inside.
    Last edited by acerberus; 20 Sep 2012 at 11:26 PM. Reason: typo
    ReportServer - Open Source Web Reporting
    reportserver.datenwerke.net

  6. #6
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    I won't say yet that you haven't found a bug, Colin and I are looking into this. In the mean time, give your HBox LC a width when adding it and it will work. Here's the code:

    Code:
    public class CssFloatLayoutTest implements EntryPoint
    {
       @Override
       public void onModuleLoad()
       {
          CssFloatLayoutContainer container = new CssFloatLayoutContainer();
          container.add(new TextField());
          container.add(new TextButton("A Button!"));
          container.add(new HTML("A Label!"));
    
    
          HBoxLayoutContainer hblc =
                new HBoxLayoutContainer(HBoxLayoutContainer.HBoxLayoutAlign.MIDDLE);
          hblc.add(new TextButton("Another Button"), new BoxLayoutContainer.BoxLayoutData(new Margins(5)));
          hblc.add(new HTML("Another Label"), new BoxLayoutContainer.BoxLayoutData(new Margins(5)));
          container.add(hblc, new CssFloatLayoutContainer.CssFloatData(200.0d));
    
    
          ContentPanel cp = new ContentPanel();
          cp.setWidth(500);
          cp.setHeight(500);
          cp.setWidget(container);
    
    
          RootPanel.get().add(cp);
       }
    }

Thread Participants: 2

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..."