GWT - DataGrid Tabelle mit Filter in der gleichen Ansicht/Panel

Question

Ich versuche, ein DataGrid in meiner Ansicht hinzuzufügen. Ich weiß, dass ein DataGrid aufgrund der Schnittstellen "ProvideResize" und "RequiresResize" nur in einem Layoutbereich bleiben kann.

Die Sache ist, ich möchte einen Filter oben auf der DataGrid-Tabelle hinzufügen, und der Filter kann keine feste Höhe haben, es könnte größer oder kleiner sein.

Kein Layout-Panel würde mehr als ein untergeordnetes Element akzeptieren, aber das LayoutPanel selbst. Trotzdem muss für jede Ebene eine Höhe in Prozent festgelegt werden, und das ist auch nicht OK.

Wenn ich das DataGrid mit einem CellTable ändern und dann beide in einem Flow Panel hinzufügen, wäre das Problem gelöst, aber die Tabelle muss scrollbar sein.

Was würde ich brauche, ist ein Flowlayoutpanel, aber es gibt kein solches Gremium in GWT

Ich dachte, dass die einzige Möglichkeit, eine benutzerdefinierte Platte zu versuchen wäre zu schaffen, die ProvidesResize und RequiresResize Schnittstellen würde implementieren. Diese

ist, wie es aussieht ein LayoutPanel mit:

<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> 

jemand mir mit diesem helfen? Vielen Dank im Voraus.

Answer 1

Wenn Sie sich nicht für sehr alte Browser interessieren, verwenden Sie - ich benutze es mit DataGrid (und für alles andere) die ganze Zeit.

Dann fügen Sie einfach display: flex; zu Ihrem Container (d. H. Wofür Sie LayoutPanel verwendet haben), und legen Sie dann flex-grow: 1 auf Ihrem DataGrid. Dadurch wird DataGrid angewiesen, den gesamten verfügbaren Speicherplatz zu übernehmen, nachdem andere Widgets im Container gerendert wurden.

P.S. In den letzten Jahren versuche ich, LayoutPanels aus Performance-Gründen so gut wie möglich zu vermeiden, insbesondere auf mobilen Geräten.

Answer 2

sieht aus wie die CSS den Trick. Vielen Dank. Dies ist, wie es aussieht:

<!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>