0

我正在尝试在我的视图上添加一个 DataGrid。我知道 DataGrid 只能留在布局面板中，因为提供了 ProvidesResize 和 RequiresResize 接口。

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

没有 Layout Panel 会接受超过一个要调整大小的孩子，但 LayoutPanel 本身。但是，每一层都需要以百分比设置高度，这也不行。

如果我用 CellTable 更改 DataGrid，然后在 Flow Panel 中添加两者，问题就会解决，但表格必须是可滚动的。

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

我在想唯一的方法是尝试创建一个自定义面板来实现 ProvidesResize 和 RequiresResize 接口。

这是使用 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>

谁能帮我这个 ？提前谢谢了。

4

2 回答 2

0

看起来 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>
于 2016-12-08T10:22:32.530 回答
0

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

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

PS 在过去的几年中，出于性能原因，我尽量避免使用 LayoutPanel，尤其是在移动设备上。

于 2016-12-06T21:49:46.900 回答