AnchorLayout usage with several FormPanels

[villemustonen]

Hello,

The Explorer had an example where a fields FormData could be set to "100%" and it would auto-size itself with the container, if the container has FitLayout.

My problem is that in my application the main window has a BorderLayout, and there is a ContentPanel with several FormPanels inside whose fields I would like to resize when the east panel is resized. This works in Firefox, but not in IE. (To be fair, it doesn't completely work in Firefox either)

In IE, the auto-resizing works for the first FormPanels fields, but not the others. So if I increase the east panels size, the fields sizes increase, but when I decrease it, only the first FormPanel resizes its fields, not the others. In Firefox, it works almost as it should, except when decreasing the fields size, all other FormPanels except the first have a slightly different field width.

Runnable test code:

package com.test.client;

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Window;
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.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;

public class TestModule extends Window {

private ContentPanel north;
private BorderLayoutData northData;
private ContentPanel west;
private BorderLayoutData westData;
private ContentPanel east;
private BorderLayoutData eastData;
private ContentPanel center;
private BorderLayoutData centerData;
private ContentPanel eastContents;

public void onModuleLoad() {

setLayout(new BorderLayout());
initPanels();

eastContents = initEastContents();

east.add(eastContents);

add(north, northData);
add(west, westData);
add(east, eastData);
add(center, centerData);

setWidth(1024);
setHeight(768);
show();

}

/**
* Create a ContentPanel with FitLayout that has two FormPanels, each with
* 10 fields, inside.
*
* @return ContentPanel
*/
private ContentPanel initEastContents() {
ContentPanel cp = new ContentPanel();
cp.setScrollMode(Scroll.AUTO);
cp.setLayout(new FitLayout());
cp.setHeaderVisible(false);

for (int n = 0; n < 2; n++) {
FormPanel panel = new FormPanel();
panel.setAutoHeight(true);
for (int i = 0; i < 10; i++) {
TextField<String> field = new TextField<String>();
field.setFieldLabel("Field" + i);
panel.add(field, new FormData("100%"));
}

cp.add(panel);
}
return cp;
}

/**
* Initializes the BorderLayout-panels,
* EastPanel has FitLayout
*/
private void initPanels() {

// North-panel
north = new ContentPanel();
north.setCollapsible(true);
north.setHeading("North");
north.setHeaderVisible(true);
northData = new BorderLayoutData(LayoutRegion.NORTH, 80, 80, 80);
northData.setCollapsible(true);
northData.setFloatable(false);
northData.setSplit(true);
northData.setMargins(new Margins(3, 3, 0, 3));

// West-panel
west = new ContentPanel();
west.setHeading("West");
west.setHeaderVisible(true);
west.setScrollMode(Scroll.AUTO);
westData = new BorderLayoutData(LayoutRegion.WEST, 150);
westData.setSplit(true);
westData.setCollapsible(true);
westData.setFloatable(true);
westData.setMargins(new Margins(3));

// East-panel
east = new ContentPanel();
east.setLayout(new FitLayout());
east.setHeading("East");
east.setHeaderVisible(true);
east.setCollapsible(true);
eastData = new BorderLayoutData(LayoutRegion.EAST);
eastData.setSplit(true);
eastData.setCollapsible(true);
eastData.setFloatable(true);
eastData.setMargins(new Margins(3));

// Center-panel
center = new ContentPanel();
center.setLayout(new FitLayout());
center.setHeading("South");
center.setHeaderVisible(true);
center.setBodyBorder(false);
centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(3, 0, 3, 0));
centerData.setCollapsible(false);
centerData.setFloatable(false);

}
}

[gslender]

you can't use a fit layout



private ContentPanel initEastContents() {
ContentPanel cp = new ContentPanel();
cp.setScrollMode(Scroll.AUTO);
cp.setLayout(new FitLayout()); ///<<< change to row layout
cp.setHeaderVisible(false);

for (int n = 0; n < 2; n++) {
FormPanel panel = new FormPanel();
panel.setAutoHeight(true);
for (int i = 0; i < 10; i++) {
TextField<String> field = new TextField<String>();
field.setFieldLabel("Field" + i);
panel.add(field, new FormData("100%"));
}

cp.add(panel); /// <<< add ,new RowData(1,height)
}
return cp;
}

[villemustonen]

Thank you, this solved it for me.

--Ville

[villemustonen]

Except for just one thing. The scrollbars are not visible when the content doesn't fit the east panel.

[gslender]

if you need scroll bars, then the container must fix its size - ie you must manually say I'm 400x1000 and if needed, the scroll bars would show.

but doing this means you know your fixed width, and so when you resize (which technically this shouldn't impact you) the fields wont resize.


see the logic issue - if you want scrollbars then why do you need fields to resize? if you want resizing fields, then why do you need scrollbars?

I guess you want width to have one behaviour and the height to have another... nothing that I know can be done like this in GXT... so you'll probably have to roll-your-own special container or layout.

[villemustonen]

Hello,

First of all, thank you for taking the time to reply to my posts and helping me solve this problem.

I think I didn't mention it clearly enough. Of course, the horizontal scrollbars should never be visible, but the vertical scrollbars should when needed.

If this is not currently doable in GXT, I would like to request this sort of feature to be added -- something like .setHorizontalScrollMode and .setVerticalScrollMode.

This seems like a logical thing to have in a panel, if its size is fixed vertically, but not horizontally.

--ville

[villemustonen]

I will post my current code again, because this is sort of a major issue for me.

If anyone can figure out (if it is even possible) how to keep the TextFields auto-sized, and add a vertical scrollbar to the east ContentPanel (horizontal scrollbar shouldn't be visible) to show all the FormPanels, please let me know.

This is the code I have now:



package com.test.client;

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Window;
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.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;

public class TestModule extends Window {

private ContentPanel east;
private BorderLayoutData eastData;
private ContentPanel center;
private BorderLayoutData centerData;
private ContentPanel eastContents;

public void onModuleLoad() {

setLayout(new BorderLayout());
initPanels();

eastContents = initEastContents();

east.add(eastContents);

add(east, eastData);
add(center, centerData);

setWidth(800);
setHeight(600);
show();

}

/**
* Create a ContentPanel with FitLayout that has five FormPanels, each with
* 10 fields, inside.
*
* @return ContentPanel
*/
private ContentPanel initEastContents() {

FormData formData = new FormData("100%");
RowData rowData = new RowData(1, 1);

ContentPanel cp = new ContentPanel();
cp.setScrollMode(Scroll.AUTO);
cp.setLayout(new RowLayout());
cp.setHeaderVisible(false);

// Add five form panels...

for (int n = 0; n < 5; n++) {
FormPanel panel = new FormPanel();
panel.setAutoHeight(true);

// ...each with 10 fields

for (int i = 0; i < 10; i++) {
TextField<String> field = new TextField<String>();
field.setFieldLabel("Field" + i);
panel.add(field, formData);
}
cp.add(panel, rowData);
}
return cp;
}

/**
* Initializes the BorderLayout-panels
*/
private void initPanels() {

// East-panel
east = new ContentPanel();
east.setLayout(new FitLayout());
eastData = new BorderLayoutData(LayoutRegion.EAST);
eastData.setSplit(true);
eastData.setMargins(new Margins(3));

// Center-panel
center = new ContentPanel();
centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(3, 0, 3, 0));

}
}