2

我想创建一个占据整个浏览器客户区域的 TabPanel，并在其中放置一个 FlexTable，如果需要，它可以滚动。但是，我无法实现这一目标。我试过了：

public void onModuleLoad() {
    TabPanel test = new TabPanel();
    test.setSize("100%", "100%");

    FlexTable flex = new FlexTable();
    for (int i = 0; i < 100; i++)
        flex.setText(i, 0, "test " + i);

    test.add(flex, "tab");
    flex.setStyleName("overflow-auto");

    test.selectTab(0);
    RootPanel.get().add(test);
    }

其中溢出自动定义为：

.overflow-auto {
    overflow: auto;
}

尽管选项卡面板正确地占据了 100% 的宽度，但它最终将其高度缩放到内部 FlexTable，而不是在其上强制滚动条。如何使标签面板的客户区与其子级的大小无关？

4

5 回答 5

3

您可能需要在该选项卡内使用 ScrollPanel 才能获得所需的效果。ScrollPanel 是一个容器，它只接受一个小部件并在需要时在其上放置一个滚动条。我应该注意，据我所知，ScrollPanel 确实取决于在其上设置显式大小，否则它会随着您放入其中的内容而愉快地扩展。

但是需要注意的是：TabPanel 内的任何类型的可滚动面板都存在一个长期存在的缺陷。最后我看到它仍然是开放的。

http://code.google.com/p/google-web-toolkit/issues/detail?id=1343

我认为您在这里寻找的解决方案是将 FlexTable 放入其他容器面板中，例如 VerticalPanel（可能 SimplePanel 就足够了），然后将其放入 ScrollPanel，最后将其推入 TabPanel。

正如我所指出的，ScrollPanel 需要您手动管理它的高度。因此，如果您希望它保持窗口的高度，这将涉及编写一些代码来检查浏览器大小并计算出 ScrollPanel 需要多高。您还需要将调整大小处理程序附加到窗口，然后捕获调整大小并修复问题。

至少，正如我现在所看到的那样，避免浏览器滚动条是这种情况。如果我错了，任何人，请告诉我，因为我有代码要删除...

于 2009-08-12T22:32:14.503 回答
1

看起来 GWT 2.0 有一个新的布局系统应该做我想要的：http ://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

于 2009-12-13T18:18:56.647 回答
1

对我有用的方法类似于 bikesandcode 写的：

  1. 创建 FlexPanel
  2. 创建一个 ScrollPanel 并将 FlexPanel 添加到其中
  3. 设置所需的 ScrollPanel 大小（使用绝对 CSS 单位）
  4. 创建一个 SimplePanel 并将 ScrollPanel 添加到其中
  5. 将 SimplePanel 添加到 TabPanel
于 2010-02-25T18:47:41.923 回答
0

The problem is actually that the table is set to 100% width/height when you set it as a tab child. If you do that the overflow-auto has no more meaning since you allow the flex table to be 100% (of its contents).

overflow only works if you set the width/height using pixels.

于 2009-08-10T06:01:18.627 回答
0

我使用 Horizo​​ntalPanel（由 gxt 提供）作为 FlexTable 的父级并使用 setAutoHeight(true) 方法。这工作正常。

于 2016-08-03T18:05:02.243 回答