我正在尝试从CellTable切换到DataGrid。实际的更改非常简单(API 完全相同) - 但是如果不明确设置网格的宽度和高度,我就无法使网格可见。在单元格表中,将宽度和高度设置为 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 具有正确的宽度和高度,但不知何故,DataGriddiv 具有 1px 高度和 0px 宽度(根据 chrome 开发人员工具的列表)
<div class="GKQJTVMDBNC-com-mycode-management-client-ui-panels-PropertiesPaneView_PropertiesPaneUiBinderImpl_GenCss_style-expanded">
知道吗?
是的,CellTable
确实使用 100% 的高度和宽度。
但是,"数据网格"没有。您需要设置明确的宽度/高度。
或者,您可以将"DataGrid"放在实现ProvidesResize接口(即SimpleLayoutPanel)的"LayoutPanel"中。
使用 LayoutPanel 的好处是,当您调整浏览器窗口的大小时,数据网格会自动调整大小。
将 DataGrid 放在 SimpleLayoutPanel 中(并将所有内容放在 RootLayoutPanel 上)确实有帮助,谢谢!。
但它只适用于这种简单的情况 - 在我的布局中它无济于事。似乎因为表格在水平面板内,所以它不会获得合适的大小。使用适当的 CSS 将水平面板分解为两个div 以使它们水平,也无济于事。
最后,我设法通过对 DataGrid 显式设置宽度和高度来解决此问题(从托管父小部件中获取值)。我不喜欢这个解决方案,但这是我经过长时间反复试验后能想到的最好的解决方案。我找不到不以"静态"方式使用 DataGrid 的好例子:GWT 展示只展示了明显的案例 - 网格在呈现之前用数据初始化。这根本不是常见的情况...