gwt2 - 带滚动的 TabLayoutPanel

Question

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

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

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

Answer 1

简短的回答是：使用 LayoutPanel 是不可能的。原因：LayoutPanel 专用于需要填充浏览器客户区的应用程序，换句话说，就是用户可见的部分。浏览器的问题之一是有一个小部件，它具有可见区域的高度，并且在调整浏览器窗口大小时也会自动调整大小。这是 LayoutPanels 解决的问题之一。

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

顺便说一句，仅供参考，您知道 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);
}