3

我已经在 Ext-GWT 论坛上发布了这个问题，我只是希望这里有人可以为我解答！

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

我有一个“布局模板”——简单地由几个 GWT DockLayoutPanel 组成，最后以 LayoutPanels 结尾。GWT 的 LayoutPanel 旨在调整添加到其中的小部件（或 Composite）的大小，使其与纯 GWT 小部件完美匹配。

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

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

反正有没有达到预期的结果？我尝试将网格添加到具有 FitLayout 布局的 ContentPanel，我尝试过 AnchorLayout，我尝试直接添加网格...似乎没有任何效果...任何建议甚至是朝着正确方向的推动都会非常重要赞赏！

提前致谢！

尚德尔

4

2 回答 2

11

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

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

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

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

只是一个有趣的最后一点，我认为可能值得一提。因此，由于我对上述几点的认识，我开始编写自己的网格和表单组件。我已经完成并且对我来说工作正常（显然，因为我写了它们，我不怀疑它们对其他人有用）。但是在编写网格组件的过程中，需要列在其父面板中绘制后自动调整大小和间隔，我发现直到最终绘制才知道面板最终宽度的知识（这毕竟发生了很久你的代码执行）。具有讽刺意味的是，我着手构建一组相互通信的面板，

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

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

尚德尔

于 2010-05-21T12:29:41.547 回答
2
  • 此解决方案适用于 GXT 2.2.0 和 GWT 2.0.4 *

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

没有理由不能将 GXT Grid 直接添加到 GWT LayoutPanel。问题是两个库的样式/定位方法冲突。基本上它归结为这样一个事实，即 Grid 的大小基于其父级的 height 属性，该属性未设置意味着网格的主体被分配的高度为 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");
  }
}

这些断言有助于防止明显非常脆弱的代码，因此请注意这是一个 GIANT, GIANT hack。

--

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

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

于 2010-11-18T19:33:50.023 回答