PDA

View Full Version : ColumnLayout not using whole area width



oriondpw
14 Aug 2009, 5:29 AM
Hi,

I'm using ColumnLayout inside a LayoutContainer and am trying to split the area 50/50 between two forms added, so I used ColumnData(.5) but the layout won't utilize the whole area, it skips a bit on the right?


package client;

import com.extjs.gxt.ui.client.widget.*;
import com.extjs.gxt.ui.client.widget.form.FieldSet;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.*;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

/**
*/
public class TestEntryPoint implements EntryPoint {

public void onModuleLoad() {

final TabPanel tabPanel = new TabPanel() {

@Override
protected void onRender(Element element, int i) {
super.onRender(element, i);

TabItem tab = new TabItem("Tab 1");
VBoxLayout layout = new VBoxLayout();
layout.setVBoxLayoutAlign(VBoxLayout.VBoxLayoutAlign.STRETCHMAX);
tab.setLayout(layout);

// north
LayoutContainer north = new LayoutContainer();
ColumnLayout cl = new ColumnLayout();
north.setLayout(cl);
north.setStyleAttribute("background-color", "blue");
north.setBorders(true);
north.setAutoHeight(true);
north.setAutoWidth(true);

// add forms to north
FormPanel form1 = createForm();
north.add(form1, new ColumnData(.5));
FormPanel form2 = createForm();
north.add(form2, new ColumnData(.5));
tab.add(north);

// south
ContentPanel south = new ContentPanel();
south.setHeading("south");
south.setAutoHeight(true);
south.setAutoWidth(true);
tab.add(south);

add(tab);
}
};

Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());
viewport.add(tabPanel);

RootPanel.get().add(viewport);
}

private FormPanel createForm() {
FormPanel appForm = new FormPanel();
appForm.setFrame(false);

FieldSet fieldSet = new FieldSet();
fieldSet.setHeading("FieldSet");
FormData formData = new FormData("-20");

TextField<String> firstName = new TextField<String>();
firstName.setEmptyText("First Name");
firstName.setAllowBlank(true);
fieldSet.add(firstName, formData);

TextField<String> lastName = new TextField<String>();
lastName.setEmptyText("Last Name");
lastName.setAllowBlank(true);
fieldSet.add(lastName, formData);

appForm.add(fieldSet);
return appForm;
}
}In hosted mode, the area gets used again on resizing the browser but when I shrink the window afterwards, the forms keep their sizes?

In web mode it's even worse.. just one 1cm of each forms width is visible.

If my code is totally wrong, could you point me in the right direction? I want to do something like in the attached image. That north's height changes dynamicly with the contained forms height and that the forms stay centered inside north.

thx

sven
14 Aug 2009, 5:33 AM
north.setAutoHeight(true);
north.setAutoWidth(true);

That will not work with automatic resizing of children.

oriondpw
14 Aug 2009, 5:43 AM
Hmm, if I don't use autoWidth the ColumnLayout works fine, but the previously skipped right region is now missing from the LayoutContainer. Why doesn't it span the full width?

sven
14 Aug 2009, 5:50 AM
I guess this is what you are looking for:

final TabPanel tabPanel = new TabPanel() {

@Override
protected void onRender(Element element, int i) {
super.onRender(element, i);

TabItem tab = new TabItem("Tab 1");
RowLayout layout = new RowLayout();
tab.setLayout(layout);

// north
LayoutContainer north = new LayoutContainer();
ColumnLayout cl = new ColumnLayout();
north.setLayout(cl);
north.setStyleAttribute("background-color", "blue");
north.setBorders(true);

// add forms to north
FormPanel form1 = createForm();
north.add(form1, new ColumnData(.5));
FormPanel form2 = createForm();
north.add(form2, new ColumnData(.5));
tab.add(north, new RowData(1,-1));

// south
ContentPanel south = new ContentPanel();
south.setHeading("south");
tab.add(south, new RowData(1,1));

add(tab);
}
};

Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());
viewport.add(tabPanel);

RootPanel.get().add(viewport);

oriondpw
14 Aug 2009, 8:42 AM
Kudos sven, I guess I should read up my css; thanks for stepping over my code :)