5

CellTableからDataGridに切り替えようとしています。実際の変更は非常に簡単でした（APIはまったく同じです）-しかし、グリッドの幅と高さを明示的に設定しないと、グリッドを表示することはできません。CellTableでは、幅と高さを100％に設定するだけで十分でした。これが、私が望む動作です。

私の見解では、HotrizontalPanelに2つのセクションがあります。1つはいくつかのタブ（ボタン）を示し、もう1つはグリッドを示しています。タブがクリックされるたびに、グリッド領域がクリアされ、新しいグリッドが作成されます。

ビューは次のようになります。

<ui:style>
    .expanded {
        width: 100%;
        height: 100%;
    }

    .simpleContainer {
        border-top: 5px solid #484848;
        border-bottom: 5px solid #484848;
    }
</ui:style>

<c:SimpleContainer addStyleNames="{style.simpleContainer} SimpleContainer">
    <g:HorizontalPanel>
        <g:HorizontalPanel ui:field="headersContainer"/>
        <g:FlowPanel ui:field="tablePanel" styleName="{style.expanded}"/>
    </g:HorizontalPanel>
</c:SimpleContainer>

そして、これは実行中のアプリケーションからのHTMLのスナップです。

<div class="GKQJTVMDCNC-com-mycode-management-client-ui-panels-PropertiesPaneView_PropertiesPaneUiBinderImpl_GenCss_style-simpleContainer SimpleContainer" id="x-widget-21" style="width: 1730px; height: 126px; ">
<table cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td align="left" style="vertical-align: top; ">....</td>
            <td align="left" style="vertical-align: top; ">
                <div class="GKQJTVMDBNC-com-mycode-management-client-ui-panels-PropertiesPaneView_PropertiesPaneUiBinderImpl_GenCss_style-expanded">
                    <div style="position: relative; overflow-x: hidden; overflow-y: hidden; " __gwtcellbasedwidgetimpldispatchingfocus="true" __gwtcellbasedwidgetimpldispatchingblur="true">
                        ....
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

上のdivには正しい幅と高さがありますが、どういうわけかDataGrid divには1pxの高さと0pxの幅があります（Chrome開発者ツールによるリストで）

<div class="GKQJTVMDBNC-com-mycode-management-client-ui-panels-PropertiesPaneView_PropertiesPaneUiBinderImpl_GenCss_style-expanded">

何か案が？

4

2 に答える 2

3

はい、CellTable100% の高さと幅で動作しました。
ただし、「DataGrid」はそうではありません。明示的な幅/高さを設定する必要があります。別の方法として、 ProvidesResizeインターフェース (つまりSimpleLayoutPanel
) を実装する ''LayoutPanel'' に ''DataGrid'' を配置することもできます。 LayoutPanel を使用する利点は、ブラウザ ウィンドウのサイズを変更すると、Datagrid が自動的にサイズ変更されることです。

于 2012-04-09T09:46:25.220 に答える
1

DataGrid を SimpleLayoutPanel 内に配置する (およびすべてを RootLayoutPanel に配置する) と、役に立ちます。

しかし、それはこの単純なケースでのみ機能します - 私のレイアウトでは役に立ちません。テーブルが Horizo​​ntalPanel 内にあるため、適切なサイズにならないようです。Horizo​​ntalPanel を適切な CSS で 2 つの div に分割して水平にすることも役に立ちません。

最後に、DataGrid の幅と高さを明示的に設定することで、それを修正することができました (ホストしている親ウィジェットから値を取得します)。私はこの解決策が好きではありませんが、長い試行錯誤の末に思いついた最善の方法です。「静的」な方法ではない DataGrid を使用する良い例を見つけることができません。GWT ショーケースは、明らかなケースのみを示します。グリッドは、表示される前にデータで初期化されます。これは一般的なケースではありません...

于 2012-04-22T11:12:38.973 に答える