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);
}

带滚动的TabLayoutPanel

4 个答案: