[SOLUTION] B5 tablelayout cell centering bug

[gslender]

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)

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);
    }
}

[darrellmeyer]

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:

cp1.setStyleAttribute("textAlign", "left");

The setPadding works for me in both IE and FF.

[gslender]

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

[darrellmeyer]

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

[gslender]

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.

[gslender]

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

In TableLayout this method should be added...

@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).

	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);
	}