一起使用 GXT 2.x 和 4.x

为了实现从 GXT 2.x 到 4.x 的平滑过渡，GXT 允许您在同一应用程序中包含 2.x 和 4.x 组件。本文解释了同时运行两个版本的组件所需的步骤。

• 注意：我们已经发布了 GXT 2.3.1a，它与 GWT 2.6 兼容，因此也与 GXT 4.x 兼容。

参考

• 查看 SDK 版本以获取兼容性选项。

更改亮点

升级到 4.x+ 时将遇到的总体更改

• 2.x 中的 setLayout 在 4.x 中变为特定容器
• 基于属性的模型数据移动到可序列化的普通旧 Java 对象。
  • 自动 bean 可用于从 JSON 创建这些对象。
  • 2.x 中的 bean 模型由属性支持，而在 4.x 中则不是，除非普通旧 Java 对象实现了属性格式。
• 外部 CSS 更改为 CssResources，后者性能更高。
• 事件侦听器更改为事件处理程序
• gxtWidget.el() 变为 gxtWidget.getElement();

总体考虑因素

使用 GXT 2.x 和 4.x 库时要记住的最常见事项。

• 为其中一个 sdk 版本使用 id 前缀，例如在 2.x 中 GXT.setAutoIdPrefix("o")。这有助于两个版本的布局引擎协同工作。
• 当使用实现顶层向下调整大小的 4.x 程序化大小调整容器并且子组件是 2.x 时，它们必须手动传递大小。
  • 可以将调整大小处理程序添加到父容器，并使用该调整大小事件来调整子组件的大小。
• 建议将 4.x+ 容器与 2.x 子组件一起使用，但也要记住顶层大小调整的工作方式。
• 不要混合加载器和代理，使用其中一个 SDK 版本。
• 尽可能切换到 4.x 网格。

项目设置

首先，您需要设置您的项目以针对 GXT 2 和 4 构建。

1. 添加库

GXT 2 要求您将相应的 JAR 添加到项目的类路径中。以相同的方式，添加 GXT 4.x JAR。

2. 添加静态资源

GXT 2 进一步要求您将资源复制到项目 war 目录。在 GXT 4.x 中，所有资源都包含在库 JAR 中，因此不需要额外的资源目录。

3. 继承模块

最后，GXT 2 有一个模块，您必须在自己的项目模块配置中继承它。以相同的方式添加 GXT 4.x 模块。

<module rename-to='mixed'>
  <inherits name='com.extjs.gxt.ui.GXT' />
  <inherits name='com.sencha.gxt.ui.GXT' />

  <entry-point class='com.sencha.mixed.client.SimpleExample' />
</module>

示例

简单示例

任何不需要由其容器调整大小的组件都可以按原样使用。在此示例中，同时使用了 2.x 和 4.x 按钮。

  @Override
  public void onModuleLoad() {
    HorizontalPanel bar = new HorizontalPanel();
    bar.setSpacing(5);

    Button button = new Button("2.x Button");
    button.addSelectionListener(new SelectionListener<ButtonEvent>() {
      @Override
      public void componentSelected(ButtonEvent ce) {
        Info.display("Action", "The " + ce.getButton().getText() + " button clicked");
      }
    });

    TextButton button2 = new TextButton("4.x Button");
    button2.addSelectHandler(new SelectHandler() {
      @Override
      public void onSelect(SelectEvent event) {
        TextButton b = (TextButton)event.getSource();
        Info.display("Action", "The " + b.getText() + " button clicked");
      }
    });

    bar.add(button);
    bar.add(button2);

    RootPanel.get().add(bar);
  }

同名示例

在前面的示例中，组件名称不同（Button 和 TextButton）。您还可以使用同名的组件。这是可能的，因为 2.x 和 4.x 之间的包命名空间不同。

  @Override
  public void onModuleLoad() {
    HorizontalPanel bar = new HorizontalPanel();
    bar.setSpacing(5);

    ContentPanel panel = new ContentPanel();
    panel.setHeading("2.x Panel");
    panel.setSize(200, 100);

    com.sencha.gxt.widget.core.client.ContentPanel panel2 = new com.sencha.gxt.widget.core.client.ContentPanel();
    panel2.setHeadingText("4.x Panel");
    panel2.setPixelSize(200, 100);

    bar.add(panel);
    bar.add(panel2);

    RootPanel.get().add(bar);
  }

容器示例

对于不需要由其容器布局调整大小的组件，您可以简单地将 4.x 组件添加到 2.x 容器或将 2.x 组件添加到 4.x 容器。

  @Override
  public void onModuleLoad() {
    LayoutContainer con = new LayoutContainer(); // 2.0 container
    con.setLayout(new CenterLayout());
    con.setSize(300, 300);
    con.setBorders(true);

    TextButton button = new TextButton("4.x Button");
    con.add(button);

    CenterLayoutContainer con2 = new CenterLayoutContainer(); // 4.x container
    con2.setPixelSize(300, 300);
    con2.setBorders(true);

    con2.add(new Button("2.x Button"));

    RootPanel.get().add(con);
    RootPanel.get().add(con2);
  }

在 4.x 组件需要由 2.x 布局调整大小的情况下，您可以将 4.x 组件包装在 2.x WidgetComponent 中。我们对 WidgetComponent 进行了尚未发布的更改。它们将包含在 GXT 2.3 中，这是我们 2.x 系列的下一个版本。作为一种解决方法，您可以使用测试项目中包含的 ComponentWrapper 类。

在 2.x 组件需要由 4.x 容器调整大小的情况下，您可以将 2.x 组件包装在 4.x WidgetComponent 中。与 2.x WidgetComponent 一样，4.x WidgetComponent 的更改不在 DP5 版本中。作为一种解决方法，您可以使用测试项目中包含的 ThreeComponentWrapper 类。

此示例显示了在 2.x 容器中使用 4.x 组件以及在 4.x 容器中使用 2.x 组件。在这两种情况下，TabPanel 都被添加到 Window。当窗口调整大小时，需要调整 TabPanel 的大小。

 @Override
  public void onModuleLoad() {
    final Window window = new Window();
    window.setHeading("2.x Window - Resize Me");
    window.setSize(300, 200);
    window.setBodyBorder(false);
    window.setLayout(new FitLayout());

    com.sencha.gxt.widget.core.client.TabPanel tabs = new com.sencha.gxt.widget.core.client.TabPanel();
    tabs.add(new HTML(""), new TabItemConfig("4.x Tab 1"));
    tabs.add(new HTML(""), new TabItemConfig("4.x Tab 2"));
    window.add(new ComponentWrapper(tabs));

    final com.sencha.gxt.widget.core.client.Window window2 = new com.sencha.gxt.widget.core.client.Window();
    window2.setHeadingText("3.0 Window - Resize Me");
    window2.setPixelSize(300, 200);

    TabPanel tabs2 = new TabPanel();
    tabs2.add(new TabItem("2.x Tab 1"));
    tabs2.add(new TabItem("2.x Tab 2"));
    window2.setWidget(new ThreeComponentWrapper(tabs2));


    ButtonBar bar = new ButtonBar();
    bar.add(new Button("2.x Window", new SelectionListener<ButtonEvent>() {

      @Override
      public void componentSelected(ButtonEvent ce) {
        window.show();
      }
    }));

    bar.add(new Button("4.0 Window", new SelectionListener<ButtonEvent>() {

      @Override
      public void componentSelected(ButtonEvent ce) {
        window2.show();
      }
    }));

    RootPanel.get().add(bar);
  }

图表示例

查看测试项目中的 ComplexContainerExample 类，以查看在 GXT 2.x Window 中使用 GXT 4.x Chart 的代码。要使用图表，您需要将 GXT 4.x chart JAR 添加到类路径并继承 chart 模块。

总结

作为一种迁移策略，GXT 2.x 和 4.x 可以同时使用。这允许应用程序随着时间的推移升级到 4.x，而不是一次性升级。请记住，运行两个版本并非最佳选择，因为它会增加应用程序需要和使用的代码和资源的大小。

下载测试项目以查看和运行这些示例。然后，访问新的 GXT 4.x 论坛并加入那里的讨论。