带滚动的 TabLayoutPanel

Question

我在 GWT 应用程序中使用 TabLayoutPanel，附加到页面的 RootLayoutPanel。

每个选项卡内都有一个 ScrollPanel，用于显示 FlexTable。

是否可以使 TabLayoutPanel 垂直增长，以便用户可以使用浏览器滚动条滚动整个页面，而不是使用内部 ScrollPanel ？

Answer 1

简短的回答是：使用 LayoutPanel 是不可能的。原因：LayoutPanel 是特定于需要填充浏览器客户端区域（即用户可见部分）的应用程序的。浏览器的问题之一是拥有一个恰好具有可见区域高度的小部件，并且在调整浏览器窗口大小时也会自动调整大小。这是 LayoutPanel 解决的问题之一。

如果您想使用浏览器滚动条并能够创建比可见区域长的页面，请使用“普通”面板。

顺便说一句，仅供参考，您知道 FlexTable 的渲染速度很慢，如果可能的话最好使用 Grid。

Answer 2

只需向 TabLayoutPanel 添加新样式：

this.addStyleName("tab-style-content");

并在 CSS 中定义为：

.tab-style-content .gwt-TabLayoutPanelContent
{
overflow: auto;     
}

这样，属性 overflow 将在 gwt-TabLayoutPanelContent 中被覆盖，并且滚动条将自动显示。

Answer 3

如果您使 TabLayoutPanel 大于根面板，您将获得一个浏览器滚动条。

Answer 4

如果我想实现这样的目标，我总是将 TabLayoutPanel 放入 SimplePanel 中，并将 SimplePanel 添加到 RootPanel 中。我想这不是最好的方法，但它确实有效。

public void onModuleLoad() {
   //Create TabPanel
   TabPanel tp = new TabPanel();
   tp.add(new HTML("Foo"), "foo");
   tp.add(new HTML("Bar"), "bar");
   tp.add(new HTML("Baz"), "baz");
   tp.selectTab(1);
   // Create SimplePanel and add TabPanel
   SimplePanel sp =new SimplePanel();
   sp.add(tp);
   // Add SimplePanel to the root panel.
   RootPanel.get().add(sp);
}