1. #1
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    2
    gslender is on a distinguished road

      0  

    Default [SOLUTION] B5 tablelayout cell centering bug

    [SOLUTION] B5 tablelayout cell centering bug


    TableLayout is still centering its cell's contents - should only centre container placed in cell, not all widgets within container of cell...impacts FormPanel too...

    Code below shows this problem and cell padding bug as well !! (see http://extjs.com/forum/showthread.php?t=38541)

    Code:
    package com.mycompany.gxt.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    
    import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
    import com.extjs.gxt.ui.client.Style.VerticalAlignment;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.Html;
    import com.extjs.gxt.ui.client.widget.Viewport;
    import com.extjs.gxt.ui.client.widget.layout.FitLayout;
    import com.extjs.gxt.ui.client.widget.layout.TableData;
    import com.extjs.gxt.ui.client.widget.layout.TableLayout;
    
    public class TableLayoutTest implements EntryPoint {
    
        public void onModuleLoad() {
            ContentPanel cp = new ContentPanel();
            cp.setHeading("Test");
            cp.setSize(800, 600);
    
            TableLayout tl = new TableLayout(2);
            tl.setWidth("100%");
            tl.setHeight("100%");
            tl.setCellHorizontalAlign(HorizontalAlignment.CENTER);
            tl.setCellVerticalAlign(VerticalAlignment.TOP);
            tl.setBorder(1);
            tl.setCellPadding(10); // does not work ??
            cp.setLayout(tl);
    
            ContentPanel cp1 = new ContentPanel();
            cp1.setHeading("ContentPanel 1");
            cp1.setWidth(100);
            cp1.setFrame(true);
            Html html1 = new Html("test text <b>that</b> is just <i>here</i> for show !!");
            cp1.add(html1);
            TableData td = new TableData();
            // td.setPadding(10); // this does work !!
            cp.add(cp1, td);
    
            ContentPanel cp2 = new ContentPanel();
            cp2.setHeading("ContentPanel 1");
            cp2.setWidth(200);
            cp2.setFrame(true);
            Html html2 = new Html("test<p>test<p>test<p>test<p>test<p>test<p>test<p>test<p>test<p>test<p>");
            cp2.add(html2);
            td = new TableData();
            // td.setPadding(10); // this does work !!
            cp.add(cp2, td);
    
            final Viewport vp = new Viewport();
            vp.add(cp);
            vp.setLayout(new FitLayout());
    
            RootPanel.get().add(vp);
        }
    }

  2. #2
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    The contents being centered is a result of the content panel being in a table cell with center alignment. This is HTML behavior. As a workaround, you can "override" alignment with this code:

    Code:
    cp1.setStyleAttribute("textAlign", "left");
    The setPadding works for me in both IE and FF.

  3. #3
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    2
    gslender is on a distinguished road

      0  

    Default


    is it possible then to have ContentPanel default with the needed 'textAlign' style attribute set by default to left (of which you need to adjust to be centre/right etc ?) this would make future issue like this easier...?

  4. #4
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    CenterLayout sets the textAlign property on the centered widget. This is not done for TableLayout as it may not be the desired result.

  5. #5
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    2
    gslender is on a distinguished road

      0  

    Default


    Understood, and whilst that does explain it, I still disagree that this is the best solution - kinda thinking that it would be better to have it behave normally (like a Swing or SWT layout would) then to accept the HTML/CSS layout ways - either way, thanks heaps for providing a workaround.
    Last edited by gslender; 20 Jun 2008 at 7:28 PM. Reason: was a little harsh...

  6. #6
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    2
    gslender is on a distinguished road

      0  

    Default


    I have a working solution that does not break anything - and it respects normal layout behaviour...

    In TableLayout this method should be added...

    Code:
    @Override
    			protected void renderAll(Container container, El target) {
    				int count = container.getItemCount();
    				for (int i = 0; i < count; i++) {
    					Component c = container.getItem(i);
    					if (c.isRendered() && DOM.getStyleAttribute(c.getElement(),"textAlign").length() < 1 )
    						c.setStyleAttribute("textAlign", "left");
    					if (c != null && !isValidParent(c.getElement(), target.dom)) {
    						renderComponent(c, 0, target);
    					}
    				}
    			}
    Example showing correct operations (I've overridden default TableLayout behaviour with above method snippet).

    Code:
    	public void onModuleLoad() {
    		ContentPanel cp = new ContentPanel();
    		cp.setHeading("Test");
    		cp.setSize(800, 600);
    
    		TableLayout tl = new TableLayout(3) {
    			@Override
    			protected void renderAll(Container container, El target) {
    				int count = container.getItemCount();
    				for (int i = 0; i < count; i++) {
    					Component c = container.getItem(i);
    //					System.out.println(DOM.getStyleAttribute(c.getElement(),"textAlign")+""+i+""+c.isRendered());
    					if (c.isRendered() && DOM.getStyleAttribute(c.getElement(),"textAlign").length() < 1 )
    						c.setStyleAttribute("textAlign", "left");
    					if (c != null && !isValidParent(c.getElement(), target.dom)) {
    						renderComponent(c, 0, target);
    					}
    				}
    			}
    		};
    		tl.setWidth("100%");
    		tl.setHeight("100%");
    		tl.setCellHorizontalAlign(HorizontalAlignment.CENTER);
    		tl.setCellVerticalAlign(VerticalAlignment.TOP);
    		tl.setBorder(1);
    		tl.setCellPadding(10);
    		cp.setLayout(tl);
    
    		ContentPanel cp1 = new ContentPanel();
    		cp1.setHeading("ContentPanel 1");
    		cp1.setWidth(100);
    		cp1.setFrame(true);
    		Html html1 = new Html("default textAlign (left)<p> test text <b>that</b> is just <i>here</i> for show !!");
    		cp1.add(html1);
    		TableData td = new TableData();
    		cp.add(cp1, td);
    
    		ContentPanel cp2 = new ContentPanel();
    		cp2.setHeading("ContentPanel 2");
    		cp2.setStyleAttribute("textAlign", "center");
    		cp2.setWidth(200);
    		cp2.setFrame(true);
    		Html html2 = new Html("textAlign=center<p>textAlign=center<p>textAlign=center<p>test<p>test<p>test<p>test<p>test<p>test<p>test<p>");
    		cp2.add(html2);
    		td = new TableData();
    		cp.add(cp2, td);
    		
    
    		ContentPanel cp3 = new ContentPanel();
    		cp3.setHeading("ContentPanel 3");
    		cp3.setStyleAttribute("textAlign", "right");
    		cp3.setWidth(200);
    		cp3.setFrame(true);
    		Html html3 = new Html("textAlign=right<p>textAlign=right<p>textAlign=right<p>test<p>test<p>test<p>test<p>test<p>test<p>test<p>");
    		cp3.add(html3);
    		td = new TableData();
    		cp.add(cp3, td);
    
    		final Viewport vp = new Viewport();
    		vp.add(cp);
    		vp.setLayout(new FitLayout());
    
    		RootPanel.get().add(vp);
    	}

Thread Participants: 1