Hi,


I try to display an image within a Grid cell, but it doesn't work. First I have an Enum, which defines an image for every code:


Code:
public enum MyType {
    X, Y, Z;


    private static final MyConstants constants = GWT.create(MyConstants.class);
    private static final MyResources resources = GWT.create(MyResources.class);


    public String getHumanReadable() {
        return constants.getString("enum" + this.name());
    }


    public AbstractImagePrototype getImage() {
        return IconHelper.create((ImageResource) resources.getResource("enum" + this.name()));
    }
}

The constants and resources are defined as:


Code:
public interface MyConstants extends ConstantsWithLookup {


    String enumX();


    String enumY();


    String enumZ();


    String nameColumn();


    String typeColumn();
}


public interface MyResources extends ClientBundleWithLookup {


    @Source("x.png")
    ImageResource enumX();


    @Source("y.png")
    ImageResource enumY();


    @Source("z.png")
    ImageResource enumZ();
}

The class IconHelper has some utility methods:


Code:
public final class IconHelper {


    public static final AbstractImagePrototype create(ImageResource resource) {
        return com.extjs.gxt.ui.client.util.IconHelper.createPath(resource.getSafeUri().asString());
    }
    
    public static final AbstractImagePrototype create(String path) {
        return com.extjs.gxt.ui.client.util.IconHelper.create(path);
    }
}

The Grid has its own ColumnModel class:


Code:
public class MyGridColumnModel extends ColumnModel {


    private final MyConstants constants;


    LocationManagerGridColumnModel() {
        super(new ArrayList<ColumnConfig>());


        constants = GWT.create(MyConstants.class);


        ColumnConfig name = new ColumnConfig("name", constants.nameColumn(), 500);
        name.setSortable(true);
        name.setMenuDisabled(true);


        ColumnConfig type = new ColumnConfig("type", constants.typeColumn(), 200);
        type.setRenderer(getTypeCellRenderer());
        type.setSortable(true);
        type.setMenuDisabled(true);


        configs.add(name);
        configs.add(type);
    }


    private GridCellRenderer<MyEntity> getTypeCellRenderer() {
        return new GridCellRenderer<MyEntity>() {
            @Override
            public Object render(MyEntity model, String property, ColumnData config, int rowIndex, int colIndex,
                    ListStore<MyEntity> store, Grid<MyEntity> grid) {
                return "<div id=\"myentity-type-image\">" + model.getType().getImage().getSafeHtml().asString() + " " + model.getType().getHumanReadable()
                        + "</div>";
            }
        };
    }
}

The model is defined like this:


Code:
public class MyEntity  extends BaseModel {


    private static final long serialVersionUID = 7835790396766767128L;


    public static final String NAME = "name";
    public static final String TYPE = "type";


    public MyEntity() {
    }


    public MyEntity(String id, String name, MyType type) {
        set(ID, id);
        set(NAME, name);
        set(TYPE, type);
    }

    public String getId() {
        return get(ID);
    }


    void setId(String id) {
        set(ID, id);
    }


    public String getName() {
        return get(NAME);
    }


    public void setName(String name) {
        set(NAME, name);
    }


    public MyType getType() {
        return get(TYPE);
    }


    public void setType(MyType type) {
        set(TYPE, type);
    }
}

The resulting HTML page contains the following DIV:


Code:
<div id="myentity-type-image">
<img border="0" style="width: 16px; height: 16px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAjyklEQVR42u19CVhUV7Zuvb653enum+5MRo0TzgODJn0797137018ye1Od5I26e6kM3Wmm8EMJtGYdDROUaOIKDKJAiLKTAHFXMVQRTHPM06IgojMIgg4EIf11r/rFCkQFLTKXOGc7/u/U8Ou2ues9e817XP2USjkTd7kTd7kTd7kTd5Gweb6ywlLo23/Iz3x6RfTU196Jz3zjY/S0155L1373Kvpcb99Kt3jvqlx3yoUv5AlNUI3F8V9u1R3jaPIn02gqJ9PouhfTKZo3kfePZEi/nk87fzJA10OigfvkSU1QjdPxX1uUYoHCYhmxEjA60jGHsX9p2UCjOBtr+IBtwTFQwQkMpIkJEqf+SsekAkwkrdgJkAqK1rPSFWMpTQG9nifwghTjDnt...qoS7lHNG3ph8NJfzCcsipVVFgdRTlVKio4Hkk5R1WUfjiCUg6ECeD7vGOR4vvsoxGUfzSeyspLqays3KJARI3nDeLO3aECj6dLTdUP+zd5eXkWO4/ysgoqPpTB8osQMoQsIVOjfCFryLygOpJyqyKFLrL5vf5AOEFH0BV0VnxC3XPi1FGPYROgtbV18YWLFw1r8HBUDJxukfbS+5Ym3jdJ++Yfvuv/veF1m1jI4XYAK4bcDjS3tFj4XFoN8jORsal8jTJu6fe9qa46O87xsbYWDJsAHR0d72HtGjy7T8adi66uLjrT3p41bAJ0dna+d+HCRWpv75BxB+P8+QvEuhw+Ac6dO/ceFmDiH8u4g4GFq1iXwyfAxYsXF4s5isuXZdzBwHb+/PnCYROAf/cw46kLFy7IuINx6dKlp9gC/KtC3uRN3uRN3uTt2u3/A/Scb+biC31HAAAAAElFTkSuQmCC") no-repeat scroll 0px 0px transparent;" src="http://127.0.0.1:8888/myproject/clear.cache.gif" onload="this.__gwtLastUnhandledEvent="load";">Ho-ho-ho
</div>

The browser (Firefox 3.6.24 and 19.0.2) doesn't display the image, it seams to display the clear.cache.gif within the grid cell. If I don't use inlined images, it is the same result:


Code:
public interface MyResources extends ClientBundleWithLookup {


    @Source("x.png")
    @ImageOptions(preventInlining = true)
    ImageResource enumX();


    @Source("y.png")
    ImageResource enumY();


    @Source("z.png")
    ImageResource enumZ();
}

Code:
<div id="myentity-type-image">
<img border="0" style="width: 16px; height: 16px; background: url("http://127.0.0.1:8888/myproject/DEDB5FB0DC3804851BE80EF7E0F73ACF.cache.png") no-repeat scroll 0px 0px transparent;" src="http://127.0.0.1:8888/myproject/clear.cache.gif" onload="this.__gwtLastUnhandledEvent="load";">
Ho-ho-ho
</div>
So it seams, that the resource url is correct (I can load the http://127.0.0.1:8888/myproject/DEDB...3ACF.cache.png in a browser tab) and the constants ("Ho-ho-ho") works too. The only thing is, that the grid doesn't display the image. Can I use images from a resource bundle with the Grid class? What is wrong with my code?

Thanks a lot
André