gxtツリーパネルのオーバーレイ画像

Question

私は、svnのようなバージョン管理のためのビューを提供するgxtアプリケーションを開発しています。TreePanelは、異なる状態（新、変更、削除など）のファイルとフォルダを含むファイルシステム構造を表示します。 ）。

各アイテムに小さなオーバーレイアイコンを表示して、その状態を反映させたいとします。私ができることは、各状態のアイコンを作成することですが、私は冗長イメージの大きな束を作成することになるので、それをしたくありません。

ツリーやグリッドにオーバーレイアイコン機能を実装するにはどうすればよいでしょうか？

Answer 1

ツリー構造のDOMを確認した後、background-url css属性を使用してツリーアイコンが表示されていることがわかりました。画像が正しいサイズで表示されるようにするには、要素の属性srcにプレースホルダ画像urlが入力されます。

実際の画像の上に表示されるため、プレースホルダ画像をオーバーレイアイコンで置き換えるのが難点です。

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

：

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を使用する方法である：

は、これを実現するために、私はオーバーレイ画像のURLを注入するClippedImagePrototypeを拡張しました