Question

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

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

我有一个各种各样的“布局模板” - 简单地由几个GWT DockLayoutPanel组成，最后在LayoutPanels中结束。 GWT的LayoutPanel旨在将添加到其中的小部件（或复合）的大小调整为其完整大小，并且与纯GWT小部件完美匹配。

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

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

无论如何都能达到预期的效果吗？我已经尝试将网格添加到具有FitLayout布局的ContentPanel，我尝试过AnchorLayout，我尝试直接添加网格......似乎没有什么工作......任何建议甚至推动正确的方向都会大大理解！

提前致谢！

Xandel

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组件自己编写。从长远来看，你可以通过遵循这个建议节省很多时间。

Xandel

Answer 2

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

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

没有理由不能直接将GXT Grid添加到GWT LayoutPanel。问题是两个库的样式/定位方法冲突。基本上它归结为Grid的大小基于其父级的height属性，这个属性没有设置意味着网格的主体被赋予高度0并且网格本身的高度等于网格头的高度（如果本）。

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

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黑客。

-

万一你想知道GXT Grid的结构定义在哪里，你可以在com / extjs / gxt / ui / client / widget / grid / GridTemplates下的GXT JAR中的模板文件中找到它＃ master.html
查看com.extjs.gxt.ui.client.widget.grid.GridView＃renderUI（）以了解网格的构建方式。

Ext-GWT / GXT（不是那么）简单布局问题？

2 个答案: