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