GWT - 동일한보기/패널에서 필터가있는 DataGrid 테이블

Question

내보기에 DataGrid를 추가하려고합니다. DataGrid는 ProvidesResize 및 RequiresResize 인터페이스 때문에 레이아웃 패널에서만 유지할 수 있습니다.

데이터 그리드 테이블 위에 필터를 추가하고 필터의 높이를 고정시킬 수 없으며 크거나 작을 수 있습니다.

레이아웃 패널이 없으면 하나 이상의 자식을 크기 조정할 수 있지만 LayoutPanel 자체는 허용하지 않습니다. 그러나 여전히 각 레이어는 높이를 백분율로 설정해야하며 괜찮습니다.

CellTable로 DataGrid를 변경 한 다음 Flow Panel에서이 두 가지를 모두 추가하면 문제가 해결되지만 테이블을 스크롤 할 수 있어야합니다.

는 내가 필요하면 FlowLayoutPanel하지만 내가 유일한 방법은 ProvidesResize 및 RequiresResize 인터페이스를 구현하는 것이 사용자 정의 패널을 만들려고하는 것이라고 생각했다 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 layout model을 사용하십시오. 저는 항상 DataGrid와 함께 사용합니다.

그런 다음 컨테이너에 display: flex; (즉, LayoutPanel을 사용한 항목)을 추가 한 다음 DataGrid에 flex-grow: 1을 설정하기 만하면됩니다. 그러면 컨테이너의 다른 위젯이 렌더링 된 후 사용 가능한 공간을 모두 가져 오도록 DataGrid에 알립니다.

P. 지난 몇 년 동안 성능상의 이유로 특히 모바일 장치에서 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>