Complex Layout

[scaswell1]

This code worked in GXT 1.2.4. I'm not wholly sure why it has stopped functioning.
The essence of the idea is that I will have various fields to display in a window.
I want to group them together as I see fit. This includes arranging the fields in columns or rows. The fields need to resize to fit their containers according to the size of the window (as the window changes size, so should the fields.)

I wasn't sure how to do it, so the approach I took was to:
Create a field set
Add to that field set a LayoutContainer with a FlowLayout
Inside the LayoutContainer, add LayoutContainers utilizing whichever layout I wish
i.e., Add an LC with a ColumnLayout and add to that LCs with fields added to them.
And then add an LC using FitLayout with an LC with fields added to it.
This would make two columns of fields taking up whatever width I require, and then fields taking up the entire width below that. I'll attach some sample code:


mainDetails.setHeading("Main Details"); //mainDetails is a FieldSet
mainDetails.setCollapsible(true);
mainDetails.addListener(Events.Expand, new Listener<FieldSetEvent>() {

public void handleEvent(FieldSetEvent be) {
window.layout();
}
});
mainDetails.addListener(Events.Collapse, new Listener<FieldSetEvent>() {

public void handleEvent(FieldSetEvent be) {
window.layout();
}
});

LayoutContainer main = new LayoutContainer();
main.setLayout(new FlowLayout());

LayoutContainer details = new LayoutContainer();
details.setLayout(new ColumnLayout());

LayoutContainer left = new LayoutContainer();
left.setLayout(createLayout()); //createLayout: see below
advertiser.setFieldLabel("Advertiser");
left.add(advertiser, FDATA); // fyi, FDATA = FormData("100%");
confirmNum.setFieldLabel("Confirmation");
left.add(confirmNum, FDATA);
resConfirmBox.setLabelSeparator("");
left.add(resConfirmBox, FDATA);
details.add(left, new ColumnData(HALF_COL_OR_ROW)); // add container as left column taking up half total space
//HALF_COL_OR_ROW = .5

LayoutContainer right = new LayoutContainer();
right.setLayout(createLayout());
arriveStatus.setFieldLabel("Arrival Status");
right.add(arriveStatus, FDATA);
adNumber.setFieldLabel("Ad Number");
right.add(adNumber, FDATA);
arrivalType.setReadOnly(true);
arrivalType.setLabelSeparator("");
right.add(arrivalType, FDATA);
details.add(right, new ColumnData(HALF_COL_OR_ROW)); // add container as right column taking up half total space

main.add(details);
mainDetails.add(details);

private FormLayout createLayout() {
FormLayout flayoutr = new FormLayout();
flayoutr.setLabelAlign(LabelAlign.LEFT);
flayoutr.setLabelWidth(LABEL_LEN);
return flayoutr;
}This worked perfectly in GXT 1.2.4. After migration, it does not. The field sets will resize (as indicated by the borders as the window resizes). I do not believe the columns in the ColumnLayout are resizing, but they should be.

Looking for any comments about how to do this more efficiently, what bug/new behavior/removed behavior is causing this, and/or alternatives.

Thanks!

[scaswell1]

If I set the layout on a FieldSet to a FitLayout, the fields will resize as the window grows.
But the fields will not resize as the window shrinks (neither will the field set, for that matter.)

[scaswell1]

It seems like ColumnLayout does not resize its Columns according to the parent as the parent resizes. I hope I'm wrong because that seems like a poor way of designing it.

Any thoughts?

[scaswell1]

So,

One FieldSet with the default layout (Flow, I am pretty sure) has a LayoutContainer set to use a ColumnLayout within it. That is the FieldSet's only child layout.

When the window containing the FieldSet is resized, the LayoutContainer is resized, I have verified this.

When the LayoutContainer resizes, it's children do not.
It has two children, both LayoutContainers, added as follows:

layoutContainer.add(left, new ColumnData(.5));

This is a bug, correct? ColumnLayout resized it's children in 1.2.4. And I saw no mention of ColumnLayout being changed in such a manner.

[sven]

ColumnLayout also resizes the children in 2.0.

[scaswell1]

Well it isn't resizing the children for me. I have posted my code, do you see any reason why it would refuse to do so?

I have turned on borders for all of the objects, FieldSet on down, and everything resizes except for the children of the ColumnLayout.

[scaswell1]

I can't find any reason why what I am trying to do isn't working.
It worked in the old version, and appears like it would work in the new version.
Seems like a bug to me. Any way to fix this?

[sven]

There are issues in your code. You use a flowlayout. That is not resizinganything. There it stops to work.

[scaswell1]

Oops, I have revised the code in trying to fix this issue.



mainDetails.setHeading("Main Details");
mainDetails.setCollapsible(true);
mainDetails.addListener(Events.Expand, new Listener<FieldSetEvent>() {

public void handleEvent(FieldSetEvent be) {
window.layout();
}
});
mainDetails.addListener(Events.Collapse, new Listener<FieldSetEvent>() {

public void handleEvent(FieldSetEvent be) {
window.layout();
}
});

LayoutContainer details = new LayoutContainer();
details.setBorders(true);
details.setLayout(new ColumnLayout());

LayoutContainer left = new LayoutContainer();
left.setLayout(new FormLayout());
advertiser.setFieldLabel("Advertiser");
left.add(advertiser, FDATA);
confirmNum.setFieldLabel("Confirmation");
left.add(confirmNum, FDATA);
resConfirmBox.setLabelSeparator(""); // causes field to be aligned correctly without displaying label
left.add(resConfirmBox, FDATA);
details.add(left, new ColumnData(HALF_COL_OR_ROW)); // add container as left column taking up half total space

LayoutContainer right = new LayoutContainer();
right.setLayout(new FormLayout());
right.setBorders(true);
arriveStatus.setFieldLabel("Arrival Status");
right.add(arriveStatus, FDATA);
adNumber.setFieldLabel("Ad Number");
right.add(adNumber, FDATA);
arrivalType.setReadOnly(true);
arrivalType.setLabelSeparator(""); // causes field to be aligned correctly without displaying label
right.add(arrivalType, FDATA);
details.add(right, new ColumnData(HALF_COL_OR_ROW)); // add container as right column taking up half total space
//HALF_COL_OR_ROW = .5

mainDetails.add(details);Turning the borders on has allowed me to see that everything resizes except for the children of the LayoutContainer set to use the ColumnLayout.

[scaswell1]

If I set the layout of the FieldSet to a ColumnLayout, and add the LayoutContainer that uses a ColumnLayout to the FieldSet with new ColumnData(1), the contents of the LayoutContainer will expand when the size INCREASES, but not when it decreases.

Which still seems like a bug.

[sven]

There is really no bug. Your code still stops resizing the children becuase you told it to dont resize the. You should try to start from scratch and always try to keep in mind that your layouts of to resize your children.

Also when posting code you should try to post always complete testcases implementing entrypoint, so others can test your code.

[scaswell1]

For some reason, when setting the FieldSet layout to ColumnLayout and adding directly to that it works as expected. It is just when adding a LayoutContainer that uses ColumnLayout to the FieldSet that the ColumnLayout does not resize its children.

Which still seems like extremely strange behavior. Why would the FieldSet resize when the width increases, but not when it decreases?

In any case, this seems like too much of a hassle to try to work with. Maybe I should just stick with the description at the beginning of this post. I'll lose some desired functionality but at least everything will resize properly.