0

我有一个扩展 FlowPanel 的类。我添加了一个 DataGrid 小部件和一个 Grid 小部件,如下所示:

dataGrid.setWidth("100%");
dataGrid.setHeight("100%");

grid.setWidth("100%");
grid.setHeight("100%");

this.add(dataGrid);
this.add(grid);

this.setWidth("100%");
this.setHeight("100%");

仅显示 DataGrid 小部件。我已经尝试过从 FlowPanel 切换到 VerticalPanel 并将 Grid 包装在 FlowPanel 中,但没有任何乐趣。我尝试将 DataGrid 和 Grid 放入 2 行 1 列的 Grid 中,但没有显示任何内容。这是 Safari 上的 GWT 2.6.0。

我怀疑我对 setHeight() 和 setWidth() 在这种情况下所做的事情有误解,但我不确定。有什么方法可以查看 GWT 在布局方面的想法吗?

谢谢。

4

2 回答 2

2

您告诉 DataGrid 占用 FlowPanel 内的所有可用空间。然后你告诉 Grid 小部件也这样做。结果是您的 Grid 的高度为零,因为在 DataGrid 占用了 FlowPanel 高度的 100% 之后没有空间留给它。

您要么必须使用“50%”作为高度,要么使 DataGrid 固定大小(“100px”),然后告诉 Grid 获取其余部分。实现这一目标的最简单方法是使用 LayoutPanel,然后,例如:

layoutPanel.setWidgetTopHeight(dataGrid, 0, Unit.PX, 100, Unit.PX);
layoutPanel.setWidgetTopBottom(grid, 100, Unit.PX, 0, Unit.PX);

编辑:

这是我用来调整 DataGrid 大小的代码:

public void resize(final boolean addHeader, final boolean addFooter) {
    Scheduler.get().scheduleDeferred(new ScheduledCommand() {

        @Override
        public void execute() {
            // 37 is the height of header and footer based on my CSS
            int height = addHeader ? 37 : 0;
            if (addFooter) {
                height += 37;
            }
            for (int i = 0; i < getRowCount(); i++) {
                height += getRowElement(i).getOffsetHeight();
            }
            setHeight(height + "px");
        }
    });
}

如果使用这种方法,只需将 DataGrid 添加到 FlowPanel,然后将 Grid 添加到 FlowPanel。在 DataGrid 上调用 resize(),不要在 DataGrid 或 Grid 上设置任何高度或宽度。

要获得更精细的控制,请查看flex-box 布局模型。所有现代浏览器都支持它。

于 2015-05-14T15:22:53.500 回答
1

@Patrick,关于您的评论,我使用DockLayoutPanel为我调整大小:

DockLayoutPanel gridPanel = new DockLayoutPanel(Unit.PCT);
gridPanel.addNorth(dataGrid, 60);  //datagrid will take 60% of the panel
gridPanel.add(grid);  //grid will take the remaining space
于 2015-05-15T11:31:44.957 回答