GWT-在同一视图 /面板中带有过滤器的DataGrid表

Question

我正在尝试在视图上添加一个数据杂志。我知道，由于提供和衡量的接口，数据杂志只能停留在布局面板中。

问题是，我想在数据摩擦表的顶部添加一个过滤器，并且过滤器不能具有固定高度，它可能更大或更小。

没有布局面板会接受比一个要调整大小的孩子更多，而是布局本身。但是，仍然需要以百分比设置一个高度，这也不可以。

如果我使用CellTable更改数据杂志，然后将两个添加到流面板中，则将解决该问题，但必须滚动表。

我需要的是flowlayoutpanel，但GWT中没有这样的面板

我认为，唯一的方法是尝试创建一个自定义面板，该定制面板可以实现提供和衡量的接口。

这就是使用Layoutpanel的样子：

    <g:layer left="2%" right="68%" top="2%" bottom="93%">                                   
        <g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
    </g:layer>
    <g:layer left="2%" right="68%" top="9%" bottom="56%">                                   
        <g:SplitLayoutPanel>
            <g:center>
                <g:HTMLPanel>
                    <g:FlowPanel ui:field="criteriaPanel" visible="false" />
                    <g:FlowPanel>
                        <g:Button ui:field="refresh">
                            <ui:text from="{text.refreshButtonCaption}" />
                        </g:Button>
                    </g:FlowPanel>
                </g:HTMLPanel>
            </g:center>
        </g:SplitLayoutPanel>
    </g:layer>
    <g:layer left="2%" right="2%" top="45%" bottom="5%">                                    
        <g:SplitLayoutPanel>
            <g:center>
                <c:DataGrid ui:field='table' />
            </g:center>
        </g:SplitLayoutPanel>
    </g:layer>
    <g:layer left='2%' right='2%' top="95%" bottom="0%">                                    
        <g:HTMLPanel>
            <table style="width:100%">
                <tr>
                    <td align='center'>
                        <c:SimplePager ui:field='pager' />
                    </td>
                </tr>
            </table>
        </g:HTMLPanel>
    </g:layer>
</g:LayoutPanel>

有人可以帮我吗？非常感谢。

Answer 1

如果您不关心非常旧的浏览器，请使用Flexbox CSS布局模型 - 我一直都将其与DataGrid（以及其他所有时间）一起使用。

然后，您只需将display: flex;添加到容器中（即使用LayoutPanel的内容），然后在数据杂志上设置flex-grow: 1即可。这将告诉DataGrid在容器中的其他小部件被渲染后占用所有可用的空间。

P.S。在过去的几年中

看起来CSS做到了。 非常感谢。 这就是它的样子：

<!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:c="urn:import:com.google.gwt.user.cellview.client">
    <ui:with field='res' type='com.vsg.vraweb.client.resource.Resources' />
    <ui:with field='text' type='com.vsg.vralang.client.GlobalConstants' />

    <!-- 
        CSS Tricks tutorial : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
        1) 'display: flex;' - enables a flex context for all its direct children. 
        2) 'flex-direction: row | row-reverse | column | column-reverse;' - This establishes 
        the main-axis, thus defining the direction flex items are placed in the flex 
        container.
        3) flex-grow: <number>; - This defines the ability for a flex item to grow if necessary. 
    -->
    <ui:style>
        .container {
            display: flex;
            flex-direction: column;
        }
        .dataGrid {  
            width: 100%;
            flex-grow: 1;
        }
    </ui:style>
    <g:FlowPanel addStyleNames="{style.container}">
        <g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
        <g:HTMLPanel>
            <g:FlowPanel ui:field="criteriaPanel" visible="false" />
            <g:FlowPanel>
                <g:Button ui:field="refresh">
                    <ui:text from="{text.refreshButtonCaption}" />
                </g:Button>
            </g:FlowPanel>
        </g:HTMLPanel>
        <c:DataGrid ui:field='table' addStyleNames="{style.dataGrid}"/>
        <g:HTMLPanel>
            <table style="width:100%">
                <tr>
                    <td align='center'>
                        <c:SimplePager ui:field='pager' />
                    </td>
                </tr>
            </table>
        </g:HTMLPanel>
    </g:FlowPanel>
</ui:UiBinder>