Ext-GWT / GXT（并非如此）简单布局问题？

Question

我已经在 Ext-GWT 论坛上发布了这个问题，我只是希望这里有人能给我答案！

我正在努力做一些我最初认为很简单但开始相信是不可能的事情...

我有一个某种“布局模板” - 简单地由几个彼此内部的 GWT DockLayoutPanel 组成，最后以 LayoutPanels 结尾。 GWT 的 LayoutPanel 旨在调整添加到其中的小部件（或组合）的大小，使其达到完整大小，并且与纯 GWT 小部件完美配合。

我的“布局模板”的想法是，我不知道内部 LayoutPanel 的确切高度和宽度，因为在实例化此模板时，我可能会以不同的方式设置（外部 DockLayoutPanel 的）某些面板尺寸。我想要的只是将 Grid 组件添加到最内部的 LayoutPanel 之一，并使其自身大小（高度和宽度）适合正常的 GWT 小部件（例如与 GWT Label 完美配合）。

我对 GXT 非常陌生（就像我今天早些时候开始使用它一样），并且我确实意识到 GXT 构建其组件的方式与 GWT 在 DOM 上构建其 Wi​​dget 的方式不同。

到底有没有办法达到想要的结果呢？我尝试过将网格添加到布局为 FitLayout 的 ContentPanel 中，我尝试过 AnchorLayout，我尝试过直接添加网格...似乎没有任何效果...任何建议，甚至是朝正确方向的推动都会非常有用赞赏！

提前致谢！

克桑德尔

Answer 1

只是对这篇文章和我采取的方向进行说明。当我开始我的 GWT 项目时，我正在学习基础知识并阅读其他帖子、关注点和建议，我最初忽略的一点建议非常简单 - 使用 GWT 框架时仅使用纯 100% GWT 组件。

我最初忽略了其他开发人员的这些公平警告，因为在开源工具和开源项目的时代，人们形成了这样一种思维模式：“与其构建一个能够为我提供某些功能的工具，不如让我看看其他人是否有已经做到了”。这种心态加快了开发速度，并且几乎标准化了项目和实施方法。

然而，过去两个月我发现，在使用 GWT 时最好不要遵循这个原则。也许是因为它不像其他框架那样广泛传播，或者需要某种类型的编码风格，但尽管如此，我对（简单、可排序、JSON 可加载）网格组件和（验证、风格整洁）表单组件的搜索却一无所获。差点就是一场噩梦。

这并不是因为它们不存在。他们确实这么做了。我尝试了 ext-gwt、gwt-ext、gwt-mosaic 和 gwt-incubator。这是因为许多组件脱离了 GWT 提供的非常简单的布局基础（换句话说，放置小部件的面板大多需要是工具提供的面板）。这反过来又使得混合成分并获得期望的结果几乎不可能。这反过来又打破了“让我找到一个有用的组件”的思维方式。

我认为这只是一个有趣的最后一点，值得一提。因此，由于我意识到了上述一点，我开始编写自己的网格和表单组件。我已经完成并且对我来说工作得很好（显然，因为我写了它们，我不怀疑它们对其他人有用）。但是在编写网格组件的过程中，并且需要在父面板中绘制后自动调整列的大小和间距，我发现直到最终绘制时才知道面板最终宽度的知识（毕竟这种情况发生很久了）您的代码执行）。因此，具有讽刺意味的是，我开始构建一组相互通信的面板，从父面板（最终需要了解其大小）一直到最内部的面板，以便当我的网格组件最终被绘制时，我可以触发一个名为 onSizeKnown(int width, int height) 的方法并执行所需的任何大小调整。

当我完成这件事后，我除了笑什么也做不了。因为我突然明白为什么所有其他 GWT 组件都需要自己的面板。本质上，我必须做同样的事情才能得到我需要的工作。

简而言之，如果您是像我一样的新手 GWT 开发人员，并且正在（现在？）正在寻找很酷的东西来使您的项目看起来很棒 - 这是我的建议 - 如果您打算使用外部框架，例如某些上面提到的 - 仅使用该框架。不要将其组件与其他框架混合。学会喜欢这个框架，并使用他们的面板和设计方法从下到上构建您的项目。如果这让您感到害怕并感到紧张和受限，那么请按照我所做的那样，使用纯香草 GWT 组件编写您自己的组件。从长远来看，遵循此建议将为您节省大量时间。

克桑德尔

Answer 2

• 该解决方案适用于 GXT 2.2.0 和 GWT 2.0.4 *

虽然原始海报已经继续，但我最近遇到了这个问题，并认为我会发布我的解决方案，以防其他人偶然发现这个问题。

您没有理由不能将 GXT Grid 直接添加到 GWT LayoutPanel。问题在于两个库的样式/定位方法存在冲突。基本上，它可以归结为这样一个事实：网格的大小是根据其父级的高度属性确定的，该属性未设置，这意味着网格的主体被分配了 0 的高度，并且网格本身的高度等于网格标题的高度（如果展示）。

因此，解决方案是在流传回 GWT 后撤消 GXT 所做的操作。这是一个模板解决方案：

class MyGridWrapper extends Composite {

  private LayoutPanel widget;
  private Grid<?> grid;

  public MyGridWrapper(Grid<? extends ModelData> grid) {
    this.grid = grid;

    widget = new LayoutPanel();
    initWidget(widget);

    widget.add(grid);
    // Set the grid's vertical and horizontal constraints

    // ... populate the rest of the panel
  }

  @Override
  protected void onLoad() {
    // onLoad is called after GXT is finished so we can do what we need to

    // Redo what the LayoutPanel did originally
    grid.el().setStyleAttribute("position", "absolute");
    grid.el().setStyleAttribute("top", "0");
    grid.el().setStyleAttribute("bottom", "0");
    grid.el().setStyleAttribute("left", "0");
    grid.el().setStyleAttribute("right", "0");

    // Undo any height settings on the .x-grid3 element
    El mainWrap = grid.el().firstChild();
    assert mainWrap.hasStyleName("x-grid3") : "Wrong Element: " + mainWrap.getStyleName();
    mainWrap.setStyleAttribute("height", "auto");

    // Undo any height settings on the .x-grid3-scroller element
    El scroller = grid.el().firstChild().firstChild().getChild(1); // FUN!
    assert scroller.hasStyleName("x-grid3-scroller") : "Wrong Element: " + scroller.getStyleName();
    scroller.setStyleAttribute("height", "auto");
  }
}

断言可以帮助防止明显非常脆弱的代码，因此请注意这是一个巨大的黑客攻击。

--

• 如果您想知道 GXT 网格的结构是在哪里定义的，您可以在 com/extjs/gxt/ui/client/widget/grid/GridTemplates#master 下的 GXT JAR 中的模板文件中找到它.html

• 查看 com.extjs.gxt.ui.client.widget.grid.GridView#renderUI() 以了解网格的构建方式。