未显示 GWT 数据网格答案

【问题标题】：GWT data grid isn't presented未显示 GWT 数据网格
【发布时间】：2012-04-08 08:58:14
【问题描述】：

我正在尝试从 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">

有什么想法吗？

【问题讨论】：

标签： java gwt datagrid

【解决方案1】：

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

【讨论】：

谢谢！我在某处看到有关 SimpleLayoutPanel 的注释，尝试过，但没有运气:( 我现在再次尝试，它添加了另一个
包装 DataGrid，但仍然没有任何可见。这是添加的 div：
您是否将SimpleLayoutPanel 添加到RootLayoutPanel 中？
不，我试图把这个 SimpleLayoutPanel 放在表中（由 HorizontalPanel 创建）。看上面的 UIBinder，'tabelPanel' 现在是 SimpleLayoutPanel 而不是 FlowPanel
您能发布您的“onModuleLoad”代码吗？如果您使用LayoutPanels，则必须确保使用RootLayoutPanel 而不是普通的RootPanel。还要尽量避免将“LayoutPanels”与基于表格的面板（如 HorizontalPanel）混合使用。
我正在使用 GWTP，所以我实际上并没有将内容放在根目录上。但我刚刚注意到 GWTP 支持在 RootPanel 和 RootLayoutPanel 之间进行选择。我将代码更改为使用 RootLayoutPanel，但没有帮助。顺便说一句 - 如果有助于理解 - 使用 GWTP RootLayoutPanel 选项以下列方式添加内容：RootPanel.get().add(RootLayoutPanel.get())，并将我的内容添加到 RootLayoutPanel。上面的 html sn-p 当然是相当复杂布局的一小部分，我应该看看其他的东西吗？

【解决方案2】：

将 DataGrid 放在 SimpleLayoutPanel 中（并将所有内容放在 RootLayoutPanel 上）确实有帮助，谢谢！

但是它只在这种简单的情况下有效 - 在我的布局中它没有帮助。似乎因为表格在 HorizontalPanel 内，所以它不会得到合适的大小。使用适当的 CSS 将 HorizontalPanel 分成两个 div 以使它们水平，也无济于事。

最后，我设法通过显式设置 DataGrid 的宽度和高度来解决这个问题（从托管父窗口小部件中获取值）。我不喜欢这个解决方案，但这是经过长时间的反复试验后我能想到的最好的解决方案。我找不到不以“静态”方式使用 DataGrid 的好例子：GWT 展示只呈现明显的情况 - 网格在呈现之前使用数据初始化。这根本不是常见的情况......

【讨论】：

您能否展示代码以从托管父级获取值？谢谢！