GWT - таблица DataGrid с фильтром в том же виде / панели

Question

Я пытаюсь добавить DataGrid на мой взгляд. Я знаю, что DataGrid может оставаться только на панели макетов из-за интерфейсов ProvidesResize и requireResize.

Дело в том, что я хочу добавить фильтр поверх таблицы DataGrid, и фильтр не может иметь фиксированную высоту, он может быть больше или меньше.

Ни одна панель макета не будет принимать размеры более одного дочернего элемента, кроме самой Layout Panel. Но, тем не менее, каждому слою нужна высота в процентах, и это тоже не хорошо.

Если я изменю DataGrid на CellTable, а затем добавлю оба на панели потоков, проблема будет решена, но таблицу нужно прокручивать.

Мне нужна FlowLayoutPanel, но в GWT такой панели нет

Я думал, что единственным способом будет попытаться создать пользовательскую панель, которая будет реализовывать интерфейсы ProvidesResize и requireResize.

Вот как это выглядит при использовании 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

Похоже, что 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>

Answer 2

Если вам не нужны старые браузеры, используйте модель макета flexbox CSS - я использую ее с DataGrid (и для всего остального) все время.

Тогда вы просто добавляете display: flex; в ваш контейнер (то есть, для чего вы использовали LayoutPanel), а затем установите flex-grow: 1 на вашей DataGrid. Это скажет DataGrid занять все доступное пространство после визуализации других виджетов в контейнере.

PS Последние несколько лет я стараюсь избегать LayoutPanels, насколько это возможно, из соображений производительности, особенно на мобильных устройствах.