View Full Version : Bug in . . Viewport? Or TopBottomComponent? Or browser issue?

8 Nov 2011, 9:49 AM

I've come across a bit of odd behavior. This happens in both Firefox 5 and IE8. However, I don't know which component/components are responsible. I'm hesitant to blame the MenuBar or FlowLayoutContainer as I find it odd that they both display the same behavior, so I am thinking it's one of their containers.

I have a program where I have a Viewport attached to the RootPanel - ok, actually the CustomViewport from here: http://www.sencha.com/forum/showthread.php?151548-Viewport-bug&p=662607

Now, into the Viewport I put a TopBottomComponent.

The call to setTopWidget is passed in a MenuBar.
The call to setBottomWidget is passed in a FlowLayoutContainer.
The call to setWidget is passed in a ContentPanel.

I add several MenuBarItem objects to the MenuBar, so there are about a dozen or so items there.

I add several TextButton objects to the FlowLayoutContainer, so, again, about a dozen or so items there.

If I manually resize the browser window, the vertical size of both the top and bottom widgets will adjust to lay out their contents correctly - spread across horizontally, and starting a new row if there's not enough horizontal room.

This also works if I hit F11 to change the browser to full screen.

However, if I do any of the following:
- hit F11 to come out of full screen
- maximize the browser
- restore the browser from maximized state

the adjustment doesn't work correctly until I manually resize the window by dragging a corner, or F11 to full screen again. Reducing the window size will cause the top and bottom widgets to NOT resize, and instead anything that would not fit in the horizontal space is simply cut off.

If I already resized so that the top or bottom components expanded their vertical size, going to maximum lays things out correctly, but doesn't shrink the vertical size down, so thus leaving some extra space in the top and bottom areas.

The following code will reproduce this:

package com.test.bug2.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.TopBottomComponent;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.container.FlowLayoutContainer;
import com.sencha.gxt.widget.core.client.container.SimpleContainer;
import com.sencha.gxt.widget.core.client.menu.Menu;
import com.sencha.gxt.widget.core.client.menu.MenuBar;
import com.sencha.gxt.widget.core.client.menu.MenuBarItem;
import com.sencha.gxt.widget.core.client.menu.MenuItem;

public class Bug_2 implements EntryPoint {
public static class CustomViewport extends SimpleContainer {
private boolean enableScroll;

public CustomViewport() {
monitorWindowResize = true;

protected void onWindowResize(int width, int height) {
setPixelSize(width, height);

public boolean getEnableScroll() {
return enableScroll;

public void setEnableScroll(boolean enableScroll) {
this.enableScroll = enableScroll;

protected void onAttach() {
setPixelSize(com.google.gwt.user.client.Window.getClientWidth(), com.google.gwt.user.client.Window.getClientHeight());

public void onModuleLoad() {

private Widget getMainAppDisplay() {
// TODO - CustomViewport needed until bug in Viewport is fixed next release of GXT
CustomViewport viewport = new CustomViewport();
TopBottomComponent mainContainer = new TopBottomComponent();
FlowLayoutContainer bottomPanel = new FlowLayoutContainer();
TextButton button;
for(int i = 1; i < 20; i++) {
button = new TextButton("Button " + i);
MenuBar menuBar = new MenuBar();
MenuBarItem menuBarItem;
Menu menu;
MenuItem menuItem;
for(int i = 1; i < 20; i++) {
menu = new Menu();
menuItem = new MenuItem("Fake item " + i);
menuBarItem = new MenuBarItem("Fake Menu Bar Item " + i, menu);
ContentPanel mainArea = new ContentPanel();
return viewport;