Question

我有一个扩展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并将网格包裹在FlowPanel中，没有任何乐趣。我尝试将DataGrid和Grid放入一个2行，1列Grid中，并且没有显示任何内容。这是Safari上的GWT 2.6.0。

我怀疑在这种情况下我对setHeight（）和setWidth（）的作用有误解，但我不确定。有没有办法看看GWT在布局方面的看法？

感谢。

Answer 1

告诉DataGrid占用FlowPanel内的所有可用空间。然后你告诉Grid小部件做同样的事情。结果是你的Grid的高度为零，因为在DataGrid占用FlowPanel高度的100％之后，它没有剩余的空间。

你要么必须使用＆＃34; 50％＆＃34;高度，或使您的DataGrid固定大小（＆＃34; 100px＆＃34;），然后告诉网格采取其余的。最简单的方法是使用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 layout模型。它在所有现代浏览器中都受支持。

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

GWT FlowPanel不添加小部件

2 个答案: