在gxt树面板覆盖图像

Question

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

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

在树或网格中实现覆盖图标功能的最佳方式是什么？

Answer 1

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

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

要做到这一点，我伸出ClippedImagePrototype注入叠加图像的URL：

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; 
    } 
} 

这是我在IconProvider实现中使用OverlayImagePrototype：

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