如何编写独立于分辨率的GWT应用程序？

Question

我发现使应用程序解决方案独立的最佳方法是使用此处所述的正确布局http://www.sencha.com/helpcenter/index.jsp?topic=/com.extjs.gxt.help/html/reference/layouts/fitlayout.html。但是，正如示例中所使用的那样，面板尺寸似乎远远超出了我们在浏览器窗口中看到的内容，如下所示：

代码如下，IndexPage是一个未设置宽度/高度的Composite，并将组件呈现如下：

public class Gallery implements EntryPoint {
public void onModuleLoad() {

    Viewport v = new Viewport();
    v.setLayout(new FitLayout());

    v.add(new IndexPage(), new FitData(5));

    RootPanel.get().add(v);

    }
}

解决此问题的正确方法是什么？

Answer 1

您的IndexPage本身太大，无法容纳视口。那该怎么办？它只能溢出/隐藏或滚动。默认情况下会溢出，但您可以使用setScrollMode来更改它。

另一种方法是让您的IndexPage更小。怎么样？通常，您需要在页面内的某处添加滚动（例如，允许分别滚动左侧面板和右侧面板）。没有神奇的自动检测，你必须决定你想要滚动条的位置（或者让内容溢出），然后手动设置ScrollContainers。然后，您可以为这些元素赋予100％的高度（可能再次使用父容器中的FitLayout）来填充任何空白区域。

Answer 2

一个解决方案很简单......你可以将ScrollPanel包装在Widget之外：

public class Gallery implements EntryPoint {
public void onModuleLoad() {

Viewport v = new Viewport();
v.setLayout(new FitLayout());

ScrollPanel sp = new ScrollPanel();
sp.setHeight("100%");
sp.setWidget(new IndexPage());

v.add(sp, new FitData(5));

RootPanel.get().add(v);

}

所以，你会得到ScrollBars。