Panels Run Off the Bottom of the Page When Size of Components Above Change

[panthro]

One of our applications contains two toolbars at the top and a TabPanel covering the rest of the page. Basic premise is the top toolbar is the menu for the app, the second toolbar holds buttons for the currently viewed Tab below it.

Application starts with no components in the second toolbar and no tabs open.

When adding buttons to the 2nd toolbar or adding the first tab to the TabPanel, no resize is being issued to any containers, nor have I found a way to to make it resize without resizing the full window. End result is the application bleeds off the bottom of the page.

Would venture to say that the panels below are holding on to their original size when a component above them is resized, moving the panel down the size of the piece added.

I had this problem in GXT 1.2 but found that if I called either the Viewport's layout or the panel right below it, that there would be a forced resize and things would work themselves out. That no longer works in GXT 2

made a demo app for this behavior:


import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.Theme;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class PageBleed implements EntryPoint {
private int panelNum = 1;
private TabPanel tabPanel;
private Viewport viewport;
private ContentPanel mainContainer;
private ContentPanel innerContainer;
private ToolBar toolBar;
private ToolBar toolBar2;

public void onModuleLoad() {
GXT.setDefaultTheme(Theme.BLUE, true);
GXT.hideLoadingPanel("loading");
createTest();
}

private void createTest(){
this.viewport = new Viewport();
this.viewport.setLayout(new FitLayout());

this.mainContainer = new ContentPanel();
this.mainContainer.setLayout(new FitLayout());
this.mainContainer.setHeaderVisible(false);

this.viewport.add(this.mainContainer);

this.tabPanel = new TabPanel();

this.toolBar = new ToolBar();

Button addPanelButton = new Button("Add Tab");
addPanelButton.addSelectionListener(new SelectionListener<ButtonEvent>(){
@Override
public void componentSelected(ButtonEvent ce) {
addTab();
}
});

Button addButton = new Button("Add Button to Toolbar 2");
addButton.addSelectionListener(new SelectionListener<ButtonEvent>(){
@Override
public void componentSelected(ButtonEvent ce) {
Button button = new Button("TestButton");
PageBleed.this.toolBar2.add(button);
}
});

Button removeAllButton = new Button("Remove All Buttons From Toolbar 2");
removeAllButton.addSelectionListener(new SelectionListener<ButtonEvent>(){
@Override
public void componentSelected(ButtonEvent ce) {
PageBleed.this.toolBar2.removeAll();
}
});

this.toolBar.add(addPanelButton);
this.toolBar.add(addButton);
this.toolBar.add(removeAllButton);

this.innerContainer = new ContentPanel();
this.innerContainer.setHeaderVisible(false);
this.innerContainer.setLayout(new FitLayout());

this.toolBar2 = new ToolBar();

this.innerContainer.setTopComponent(this.toolBar2);
this.innerContainer.add(this.tabPanel);

this.mainContainer.setTopComponent(this.toolBar);
this.mainContainer.add(this.innerContainer);

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

this.viewport.layout(true);
}

private void addTab(){
ContentPanel insidePanel = new ContentPanel();
insidePanel.setHeaderVisible(false);

TabItem tabItem = new TabItem();
tabItem.setClosable(true);
tabItem.setLayout(new FitLayout());
tabItem.setText("Panel " + this.panelNum);
this.panelNum++;

tabItem.add(insidePanel);

this.tabPanel.add(tabItem);
this.viewport.layout();
this.mainContainer.layout();
this.innerContainer.layout();
tabItem.layout();
insidePanel.layout();
}
}On application start, you should be able to see the blue border at the very bottom. On clicking add Tab or add Button, the border at the bottom will be pushed off the page. I could not get the demo to do it as much as in our application (to the tune of losing half a paging toolbar) but the same premise is there.

all layouts are called in addTab() to show that none seem to have an effect.

Another way to see this happening:
Add a Tab and a Button on the demo
Resize the browser and it'll fit the window correctly
remove the Tab and Button and Main and Inner panels' border will no longer fit the window

Using the latest version of GXT 2 (revision 1672) though have seen the problem since the the 2.0 release (was not on 2 before that).

Demo was made using hosted mode but original problem occurs on both hosted mode and firefox 3.0.12.

OS is Vista

Please let me know if this is just a coding issue. Our code is running fine in production on 1.2 with calling the viewport's layout but that could just be a hack job

[sven]

There is a sizecache inplace. You need to call syncSize on the holding panel. This was dicussed several times now. Moving this to the help forum.

[panthro]

changing the addTab() to :


private void addTab(){
ContentPanel insidePanel = new ContentPanel();
insidePanel.setHeaderVisible(false);

TabItem tabItem = new TabItem();
tabItem.setClosable(true);
tabItem.setLayout(new FitLayout());
tabItem.setText("Panel " + this.panelNum);
this.panelNum++;

tabItem.add(insidePanel);

this.tabPanel.add(tabItem);
this.viewport.syncSize();
this.viewport.layout();
this.mainContainer.syncSize();
this.mainContainer.layout();
this.innerContainer.syncSize();
this.innerContainer.layout();
tabItem.syncSize();
tabItem.layout();
insidePanel.syncSize();
insidePanel.layout();
}

Still shows the same problem of moving the border down. Again, calling all as a shot in the dark that one will work

[sven]

You cant just call everything everywhere, however i am going to look into this.

[sven]

Ok, with the next release it will be more easy. Than you only need to call


innerContainer.syncSize(); In your buttonlistener when you change the toolbar (add an item if the was no one before or removeall)