在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")); 
    } 
});