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

Question

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

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

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

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

Что мне нужно это 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> 

Может кто-нибудь помочь мне с этим? Большое спасибо заранее.

Answer 1

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

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

P.S. В течение последних нескольких лет я стараюсь избегать LayoutPanels как можно больше из соображений производительности, особенно на мобильных устройствах.

Answer 2

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