Question

GWT展示，以及我发现的许多示例，总是有一个非常简单的DataGrid用法：

您在UIBinder中定义了DataGrid元素，并设置了要提供的字段。
在视图构造函数中初始化网格 - 定义列并添加数据
生成UI活页夹
按预期呈现的一切......

但常见的情况并非如此静止：您通常设置网格但没有数据，只有在用户做某事后才能提供数据（点击按钮等）。

我花了很多时间在复杂的UI布局中呈现DataGrid：| 为此，网格现在托管在具有100％宽度和高度的SimpleLayoutPanel中，并且此SimpleLayoutPanel位于某个停靠面板内。但由于理由我不明白 - 网格显示在对接面板大小之外，所以我永远看不到其滚动条的底端。

这是我的UI活页夹（为清晰起见删除了一些内容）：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>

.sidePadding {
    padding-left: 8px;
        padding-right: 8px;
 }

    .expanded {
    width: 100%;
    height: 100%;
}


<g:DockLayoutPanel unit="PX" styleName="{style.expanded}">
    <g:north size="45">
        ...
    </g:north>
    <g:center>
    </g:center>
        ...
    <g:east size="190">
        <g:FlowPanel styleName="{style.sidePadding}">
            <g:FlowPanel>
                <g:Label>SOME TOOLBAR</g:Label>
            </g:FlowPanel>
            <g:HTMLPanel>
                <g:Label>SOME PANEL PANEL </g:Label>
            </g:HTMLPanel>
            <g:FlowPanel ui:field="eastContent">
                <g:Label>SOME FLOW PANEL</g:Label>
            </g:FlowPanel>
            <g:SimpleLayoutPanel ui:field="imagesGrid" addStyleNames="{style.expanded}"/>
        </g:FlowPanel>
    </g:east>
</g:DockLayoutPanel>

</ui:UiBinder>

事实证明 - 东面板的高度为650px，这是正确的值，而且SimpleLayoutPanel内的DataGrid也有相同的高度！并且因为它之前有一些标签等 - 它溢出了东面板的大小..

任何帮助???

更新似乎如果我从东面板中删除所有内容并只留下DataGrid的SimpleLayoutPanel - 它可以找到！但我确实需要在网格上方添加所有这些额外的标签 - 我找不到解决方案。 ??

Answer 1

请参阅https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels

布局面板（RequiresResize窗口小部件）必须嵌套到其他布局面板（ProvidesResize窗口小部件）中，一直到RootLayoutPanel，ResizePanel或者布局面板具有明确且固定的大小（即不是 fuild ，例如，不以父面板的百分比给出，而是以像素为单位）。

此处，FlowPanel和DockLayoutPanel之间的SimpleLayoutPanel会破坏层次结构。

您可能希望将FlowPanel与HeaderPanel进行交易，将所有FlowPanel放入标题（在容器FlowPanel中）和您的SimpleLayoutPanel（或您的Datagrid）作为内容尽管没有实施ProvidesResize，但HeaderPanel尊重此合同，但仅限于内容子项（这是它的关键：根据内容子项的大小而定HeaderPanel的大小以及标题和页脚的内在大小

带有SimpleLayoutPanel的GWT DataGrid不会显示垂直滚动条

1 个答案: