Question

我正在开发一个gxt应用程序，为类似svn的版本控制提供视图：一个TreePanel，显示文件系统结构，文件和文件夹具有不同的状态（新的，修改的，删除的等）。

我想在每个项目上显示一个小的叠加图标以反映其状态。我能做的是为每个州创建一个图标，但我不想这样做，因为我最终会创建一大堆冗余图像。

在树木或网格中实施叠加图标功能的最佳方法是什么？

Answer 1

在检查树结构的dom后，我发现使用background-url css属性显示树图标。为确保以正确的大小显示图像，元素的src属性将填充占位符图像网址。

诀窍是，用叠加图标替换占位符图像，因为它显示在实际图像上方。

为实现这一目标，我扩展了ClippedImagePrototype以注入叠加图像的网址：

public class OverlayImagePrototype extends ClippedImagePrototype {
  protected String overlayImageUrl = null;

  public static AbstractImagePrototype create(ImageResource resource, String overlayUrl) {
    return new OverlayImagePrototype(resource.getSafeUri(),
                 resource.getLeft(), resource.getTop(), resource.getWidth(),
                 resource.getHeight(), overlayUrl);
  }

  private OverlayImagePrototype(SafeUri url, int left, int top, int width,
                                int height, String overlayUrl) {
    super(url, left, top, width, height);
    this.overlayImageUrl = overlayUrl;
  }

  public ImagePrototypeElement createElement() {
    ImagePrototypeElement imgEl = super.createElement();
    if (overlayImageUrl != null) {
      imgEl.setAttribute("src", overlayImageUrl);
    }
    return imgEl;
  }
}

这就是我在OverlayImagePrototype实施中使用IconProvider的方式：

tree.setIconProvider(new ModelIconProvider<ModelData>() {
  public AbstractImagePrototype getIcon(ModelData model) {
    return OverlayImagePrototype.create(model.get("icon"), model.get("overlayIconUrl"));
  }
});

在gxt树面板中叠加图像

1 个答案: