GWT FlowPanel不添加小部件

Question

我有一个扩展FlowPanel的类。我添加了一个DataGrid小部件和一个网格部件，如下所示：

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，也尝试过在FlowPanel中封装网格，没有joy。我试着把DataGrid和网格放到一个2行1列网格中，但是没有显示任何内容。这里是Safari上的GWT 2.6.0。

我怀疑我对setHeight()和setWidth()在本例中所做的事情有误解，但我不确定。有没有办法看看GWT认为它在布局方面做了什么？

谢谢。

Answer 1

您告诉DataGrid占用FlowPanel中的所有可用空间。然后告诉Grid小部件也要这样做。其结果是，您的网格的高度为零，因为在DataGrid获取100%的FlowPanel高度后，没有空间为它留下空间。

您要么使用"50%“作为高度，要么使您的DataGrid固定大小(”100 to“)，然后告诉网格采取其余的。实现这一目标的最简单方法是使用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，然后将网格添加到FlowPanel。在DataGrid上调用resize()，不要在DataGrid或Grid上设置任何高度或宽度。

要获得更好的控件，请查看柔性盒布局模型。所有现代浏览器都支持它。

Answer 2

@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