Ext-GWT/GXT

Question

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

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

我有各种各样的“布局模板” - 简单地由几个GWT DockLayoutPanel的范围内相互最后在LayoutPanels中结束。 GWT的LayoutPanel被设计用于调整添加到它的完整大小的小部件（或复合），并且完全用纯GWT小部件来完成。

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

我是GXT的新手（正如我在今天早些时候开始使用它的），我意识到GXT的构建方式与GWT在DOM上构建它的Widget的方式不同。

无论如何要达到预期的效果吗？我曾尝试将网格添加到具有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和2.0.4 GWT *

虽然原来的海报已又跳槽最近，我遇到了这个问题，我想我会发布我的解决方案，以防其他人绊倒在这。

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

的断言是有帮助防止什么显然是非常脆弱的代码，所以要小心，这是一个巨大的，巨大的黑客。

-

• 以防万一你想知道的GXT电网的结构定义在那里，你可以找到它在GXT JAR模板文件下的COM/ExtJS的/ GXT/UI /客户端/widget/grid/GridTemplates#master.html

• 查看com.extjs.gxt.ui.client.widget.grid.GridView＃renderUI（）以了解如何构建网格。