没有呈现GWT数据网格

Question

我正在尝试从CellTable切换到DataGrid.实际的变化非常简单(API完全相同) - 但如果没有明确设置其宽度和高度,我无法看到网格.在CellTable中,将宽度和高度设置为100%就足够了 - 这就是我想要的行为.

在我看来,我在HotrizontalPanel中有两个部分:一个显示一些选项卡(按钮),另一个显示网格.每次单击选项卡时,将清除网格区域并创建新网格.

该视图如下所示:

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

任何的想法？

Answer 1

是的，CellTable确实可以使用 100% 的高度和宽度。
然而“DataGrid”却没有。您需要设置明确的宽度/高度。
或者，您可以将“DataGrid”放入实现ProvidesResize接口（即SimpleLayoutPanel）的“LayoutPanel”中。
使用 LayoutPanel 的好处是，当您调整浏览器窗口大小时，Datagrid 会自动调整大小。