PDA

View Full Version : Borderlayout look strangen with GXT 2.2.0 GWT 2.0.4 ... ???



jesper@extjs
22 Sep 2010, 11:14 AM
I have copied the source from the Demo to make a Border layout like the one in Demo but the North Panel has the South Panel on top of it ....There is a screenshot at Java2s which looks the same on my computer:

http://www.java2s.com/Code/Java/GWT/BorderLayoutandBorderLayoutDataExtGWT.htm

Any guesses?

Gwt 2.0.4 in Hosted Mode
Linux Ubuntu
FireFox 3.6.10
GXT ver 2.2.0

Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>G3 Application</title>
<link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />
<link rel="stylesheet" href="G3.css">

</head>
<body>
<script type="text/javascript" language="javascript" src="G3/G3.nocache.js"></script>
</body>
</html>
Border layout code :

public class BorderLayoutExample extends LayoutContainer {

protected void onRender(Element target, int index) {

super.onRender(target, index);

final BorderLayout layout = new BorderLayout();
setLayout(layout);
setStyleAttribute("padding", "10px");

ContentPanel north = new ContentPanel();
ContentPanel west = new ContentPanel();
ContentPanel center = new ContentPanel();
center.setHeading("BorderLayout Example");
center.setScrollMode(Scroll.AUTOX);

FlexTable table = new FlexTable();
table.getElement().getStyle().setProperty("margin", "10px");
table.setCellSpacing(8);
table.setCellPadding(4);

for (int i = 0; i < LayoutRegion.values().length; i++) {
final LayoutRegion r = LayoutRegion.values()[i];
if (r == LayoutRegion.CENTER) {
continue;
}
SelectionListener<ButtonEvent> sl = new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
String txt = ce.getButton().getText();
if (txt.equals("Expand")) {
layout.expand(r);
} else if (txt.equals("Collapse")) {
layout.collapse(r);
} else if (txt.equals("Show")) {
layout.show(r);
} else {
layout.hide(r);
}

}
};
table.setHTML(i, 0, "<div style='font-size: 12px; width: 100px'>" + r.name() + ":</span>");
table.setWidget(i, 1, new Button("Expand", sl));
table.setWidget(i, 2, new Button("Collapse", sl));
table.setWidget(i, 3, new Button("Show", sl));
table.setWidget(i, 4, new Button("Hide", sl));
}
center.add(table);

ContentPanel east = new ContentPanel();
ContentPanel south = new ContentPanel();

BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH, 100);
northData.setCollapsible(false);
northData.setFloatable(true);
northData.setHideCollapseTool(true);
northData.setSplit(true);
northData.setMargins(new Margins(0, 0, 5, 0));

BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150);
westData.setSplit(true);
westData.setCollapsible(true);
westData.setMargins(new Margins(0,5,0,0));

BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(0));

BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 150);
eastData.setSplit(true);
eastData.setCollapsible(true);
eastData.setMargins(new Margins(0,0,0,5));

BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH, 100);
southData.setSplit(true);
southData.setCollapsible(true);
southData.setFloatable(true);
southData.setMargins(new Margins(5, 0, 0, 0));

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

sven
22 Sep 2010, 11:24 AM
Yes, you are probably not sizing your BorderLayoutExample container as described

here: http://www.sencha.com/forum/showthread.php?109479-Using-borderLayout-SOUTH-appearing-at-TOP-above-NORTH-how-to-fix&highlight=BorderLayoutExample

and here: http://www.sencha.com/forum/showthread.php?105117-Border-layout-example-not-working&highlight=BorderLayoutExample

and here: http://www.sencha.com/forum/showthread.php?73440-What-is-wrong-with-BorderLayoutExample&highlight=BorderLayoutExample

and also here http://www.sencha.com/forum/showthread.php?96583-Weird-looking-of-BorderLayout&highlight=BorderLayoutExample

There are many more, i found them with the forum search.

To make it short: Use a Viewport with a FitLayout. To this Viewport you add BorderLayoutExample and the Viewport you add to the RootPanel

jesper@extjs
22 Sep 2010, 11:32 AM
Thx .. :0) found them too when I searched for BorderLayoutExample .. not sure why i didn't try that a first .. (only tried BorderLayout .. )