Question

当我有很多小部件时 - 更多页面可以显示 - “新”方式

RootLayoutPanel.get().add(w)

我的浏览器中没有显示滑块。用“老”的方式

RootPanel.get().add(w)

确实如此。为什么？我想使用“现代”方式（使用TabLayoutPanel）和GWT布局类，但现在我不能。

（我的index.html以<!doctype html>开头）。

编辑：如果我改为

RootLayoutPanel.get().add( new ScrollPanel( widget) );

它有效！我不知道这是不是正确的方式......

Answer 1

它们是互斥的，RootPanel支持在浏览器级别自动重新调整大小和自动滚动条。例如，如果您将项目放入表格并添加足够的内容以使其离开屏幕底部，RootPanel将自动添加滚动条，以便您可以访问底部元素RootLayoutPanel不会，除非你将该元素放在ScrollPanel中，然后它与RootPanel的内容不同。

RootLayoutPanel希望您手动控制所有这些。你可以拥有另一个，但不能同时拥有两个。在使用resize通知RootLayoutPanel部分何时重新布局时，您必须将处理程序与Layout事件联系起来。

RootLayoutPanel的目标是允许您创建更像桌面的基于Web的应用程序。它不应该是RootPanel的替代品，它不是更好或更糟除非它支持或不支持您正在尝试的内容要做。

Answer 2

我使用LayoutPanels和SimplePanels作为我的主要布局（附加到RootLayoutPanel）。对于可能需要滚动条的面板，我只需添加样式：

.overflow {
    overflow: auto;
}

下面给出了一个示例模板。我认为使用ScrollPanel而不是SimplePanels将是一种同样有效的方法，它只取决于哪种方法最适合您的设计/要求。我更喜欢只有需要它们的滚动条，所以我使用overflow：auto。

  <ui:style>
    .filterPanel {
        padding: 10px;
        background-color: #CCCCCC;
    }
    .overflow {
        overflow: auto;
    }
  </ui:style>
  <g:LayoutPanel styleName="ListLayoutPanel">
    <g:layer left="0px" width="300px">
      <g:SimplePanel ui:field="filterPanel" styleName="{style.filterPanel}" />
    </g:layer>
    <g:layer left="300px" right="500px">
      <g:SimplePanel ui:field="tablePanel" styleName="{style.overflow}"></g:SimplePanel>
    </g:layer>
    <g:layer width="500px" right="0px">
      <g:SimplePanel ui:field="detailPanel" styleName="{style.overflow}"/>
    </g:layer>
  </g:LayoutPanel>
</ui:UiBinder>

如果我将RootPanel更改为RootLayoutPanel，我的浏览器将省略滑块。为什么？

2 个答案: