Css 允许GWT数据网格填充可用高度

考虑一个其UI具有选项卡的GWT应用程序。在一个选项卡中有几个固定大小的元素，后面是一个

DataGrid

 _______________________________________________
|       ______                                  |
| Tab1 / Tab2 \ Tab3                            |
|_____/        \________________________________|
| Fixed size widgets here.                   || |
| Fixed size widgets here.                   || |
| ----------------------                     || |
| Datagrid headings         tab scrollbar -->|| |
| cell cell cell cell ||                     || |
| cell cell cell cell ||                     || |
| cell cell cell cell ||<-- datagrid         || |
| cell cell cell cell ||    scrollbar        || |
| cell cell cell cell ||                     || |
| cell cell cell cell ||                     || |
 -----------------------------------------------

我想我需要的是

RootLayoutPanel

版本，而不是

RootPanel

，但我欢迎对此发表评论

现在一些

UiBinder

code：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:d="urn:import:com.google.gwt.user.cellview.client"
    >
    <ui:style>
        .foo { 
        min-height: 100px; 
        max-height: 300px; 
        }

    </ui:style>
    <g:TabLayoutPanel ui:field="tabLayout" barUnit="PX" barHeight="30" >
        <g:tab>
            <g:header> Tab One </g:header>
            <g:ScrollPanel height="100%"> <!-- Hack? height="100%":-->
                <g:FlowPanel>
                    <g:Label text="Window.getClientHeight():"/>
                    <g:Label ui:field="label" text="Window.getClientHeight()"/>
                    <g:Label text="grid.getElement().getAbsoluteTop():"/>
                    <g:Label ui:field="label2" text="grid.getElement().getAbsoluteTop()"/>
                    <d:DataGrid styleName='{style.foo}' ui:field="grid"/>
                </g:FlowPanel>
            </g:ScrollPanel>
        </g:tab>
    </g:TabLayoutPanel>
</ui:UiBinder>

onResize（）中的机制不仅对我来说很难闻（它是作为一个实验实现的），而且工作起来也很糟糕

有没有一种简单的方法可以在CSS中实现这一点？还是必须在onResize（）中执行某些操作？我使用GWT的动机之一是避免因浏览器之间的差异而导致的问题，那么纯CSS是正确的方法吗

我在不同的地方把

height

设置为

100%

作为黑客，看看它有什么不同。我非常想正确地理解这一切是如何联系在一起的——任何阅读建议都是非常受欢迎的。我还尝试了以下指南，例如使用CSS：

html, body {
    height: 100%;
}

---

我还发现了这个信息：。但它没有解决我的问题。

您有三个选择：

使用附加到窗口的ResizeHandler。调整窗口大小时，计算并设置DataGrid的大小

在选项卡内使用LayoutPanel（或VerticalPanel0）。设置固定宽度小部件，然后设置DataGrid小部件：

myLayoutPanel.setWidgetTopBottom(myDataGrid, 120, Unit.PX, 0, Unit.PX);

此解决方案不需要调整大小处理程序，但在布局中引入了一个额外的小部件（即HTML代码）

如果你不关心旧的浏览器，可以使用flexbox布局模型（）。这是一个纯CSS解决方案

---

假设Datagrid上方的静态小部件的高度是恒定的，并且已知，我会这样做：

UiBinder代码：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:d="urn:import:com.google.gwt.user.cellview.client"
    >
    <ui:style>
        .foo { 
        min-height: [HEIGHT OF STATIC WIDGETS + 100px]; 
        max-height: [HEIGHT OF STATIC WIDEGET + 300px; 
        }

    </ui:style>
    <g:TabLayoutPanel ui:field="tabLayout" barUnit="PX" barHeight="30" >
        <g:tab>
            <g:header> Tab One </g:header>
            <g:ScrollPanel >
                <g:LayoutPanel addStyleNames="{style.foo}">
                    <g:layer top="0" height="[HEIGHT OF STATIC WIDGETS]">
                        <g:FlowPanel> 
                          <g:Label text="Window.getClientHeight():"/>
                          <g:Label ui:field="label" text="Window.getClientHeight()"/>
                          <g:Label text="grid.getElement().getAbsoluteTop():"/>
                          <g:Label ui:field="label2" text="grid.getElement().getAbsoluteTop()"/>
                         </g:FlowPanel>
                    </g:layer>
                    <g:layer top="[HEIGHT OF STATIC WIDGETS] bottom="0">
                        <d:DataGrid  ui:field="grid"/>
                    </g:layer>
               </g:LayoutPanel>
            </g:ScrollPanel>
        </g:tab>
    </g:TabLayoutPanel>
</ui:UiBinder>

foo{
最小高度：[静态小部件的高度+100px]；
最大高度：[静态WIDEGET的高度+300px；
}
表一
第三个选项是将
数据网格
包装在
ResizeLayoutPanel
中。您的选项与我列表中的第二个选项完全相同：）AFAIK
LayoutPanel
s需要一个到
RootLayoutPanel
的不间断链，因为它们实现了
RequiresResize
接口。但是
ResizeLayoutPanel
只实现了
ProvidesResize
接口，因此也可以在非
LayoutPanel
中使用（比如在
div
或
FlowPanel
）TabLayoutPanel实现了providesize，因此您可以在示例中使用LayoutPanel而不是ScrollPanel，或者在必要时使用ScrollPanel。我不是在争论；-）我只是说如果您想将
数据网格
放在非布局面板的某个地方（即
FlowPanel
或div）您需要提供明确的尺寸，或者您可以使用
ResizeLayoutPanel
。相信它是唯一一个在任何地方都能工作的布局面板。所有其他类似布局的面板（即
LayoutPanel
，
DockLayoutPanel
，
SimpleLayoutPanel
）只有在布局面板链一直延伸到
RootLayoutPanel的情况下，才有效`
myLayoutPanel.setWidgetTopBottom(myDataGrid, 120, Unit.PX, 0, Unit.PX);

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:d="urn:import:com.google.gwt.user.cellview.client"
    >
    <ui:style>
        .foo { 
        min-height: [HEIGHT OF STATIC WIDGETS + 100px]; 
        max-height: [HEIGHT OF STATIC WIDEGET + 300px; 
        }

    </ui:style>
    <g:TabLayoutPanel ui:field="tabLayout" barUnit="PX" barHeight="30" >
        <g:tab>
            <g:header> Tab One </g:header>
            <g:ScrollPanel >
                <g:LayoutPanel addStyleNames="{style.foo}">
                    <g:layer top="0" height="[HEIGHT OF STATIC WIDGETS]">
                        <g:FlowPanel> 
                          <g:Label text="Window.getClientHeight():"/>
                          <g:Label ui:field="label" text="Window.getClientHeight()"/>
                          <g:Label text="grid.getElement().getAbsoluteTop():"/>
                          <g:Label ui:field="label2" text="grid.getElement().getAbsoluteTop()"/>
                         </g:FlowPanel>
                    </g:layer>
                    <g:layer top="[HEIGHT OF STATIC WIDGETS] bottom="0">
                        <d:DataGrid  ui:field="grid"/>
                    </g:layer>
               </g:LayoutPanel>
            </g:ScrollPanel>
        </g:tab>
    </g:TabLayoutPanel>
</ui:UiBinder>