PDA

View Full Version : [1.2.4] Bottom-positioned tabs layout problem



cvs_fif
21 May 2009, 1:49 AM
There is an interesting layout bug when you add a "bottom" tab in a "top" one as a response to an event: the tab title is only half-visible and the contents of the tab are not rendered (see first attachment). Once you resize the window, this is fixed (second attachment). When you open new tabs after resizing the window, the tab title is shown, but the contents are still not rendered until you resize once more.

None of this happens when you create the tab together with the tab panel.

Here is the test case:


package com.crofthawk.bugreports.r1_124.client;

import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.TreeEvent;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.util.TreeBuilder;
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.TabPanel.TabPosition;
import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
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.tree.Tree;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.RootPanel;

public class BugReport implements EntryPoint {

private static class Folder extends BaseTreeModel < Folder > {
private static final long serialVersionUID = -5396592446936547009L;

public Folder(final String name) {
set("name", name);
}

@Override
public String toString() {
return get("name");
}
}

public void onModuleLoad() {
final Viewport viewport = new Viewport();
viewport.setLayout(new BorderLayout());

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

final BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST);
westData.setMargins(new Margins(5));
westData.setCollapsible(true);
westData.setSplit(true);
westData.setFloatable(true);

final ContentPanel mainHolder = new ContentPanel();
mainHolder.setHeaderVisible(false);
mainHolder.setLayout(new FitLayout());
final TabPanel mainPanel = new TabPanel();
mainPanel.setResizeTabs(true);
mainPanel.setAnimScroll(true);
mainPanel.setTabScroll(true);
mainHolder.add(mainPanel);
viewport.add(mainHolder, centerData);

final SimpleComboBox < String > box = new SimpleComboBox < String >();
box.add("One");
box.add("Two");
box.add("Three");
final ContentPanel treePanel = new ContentPanel();

final Tree tree = new Tree();
tree.addListener(Events.SelectionChange, new Listener < TreeEvent >() {
public void handleEvent(final TreeEvent be) {
final TabItem topItem = new TabItem("Top");
topItem.setClosable(true);
topItem.setLayout(new FitLayout());
mainPanel.add(topItem);

final ContentPanel innerHolder = new ContentPanel();
innerHolder.setHeaderVisible(false);
innerHolder.setLayout(new FitLayout());
final TabPanel innerPanel = new TabPanel();
innerPanel.setTabPosition(TabPosition.BOTTOM);
final TabItem innerItem = new TabItem("Bottom");
final HTMLPanel content = new HTMLPanel("Test");
innerItem.add(content);
mainPanel.setSelection(topItem);
innerPanel.add(innerItem);
innerHolder.add(innerPanel);
topItem.add(innerHolder);
innerPanel.setSelection(innerItem);
}
});
final Folder treeModel = new Folder("");
treeModel.add(new Folder("Item 1"));
treeModel.add(new Folder("Item 2"));
TreeBuilder.buildTree(tree, treeModel);

treePanel.setLayout(new FitLayout());
treePanel.add(tree);

viewport.add(treePanel, westData);

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

}