1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Leipzig, Germany
    Posts
    75
    Vote Rating
    1
    A.Rothe is on a distinguished road

      0  

    Default Image within Grid cell

    Image within Grid cell


    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é

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Location
    Leipzig, Germany
    Posts
    75
    Vote Rating
    1
    A.Rothe is on a distinguished road

      0  

    Default


    I have found it: the image was bigger than 16x16. I use now another image and it is visible.

    Embarrassing, embarrassing...
    André

  3. #3
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    That seems a little odd - it looked like the width:16px was generated by the ImageResource, not by anything you did, or am I misunderstanding?

    The method AbstractImagePrototype.create(ImageResource).getSafeHtml() is probably the cleanest way to turn an ImageResource into a String (or SafeHtml in this case, since you are using SafeHtmlBuilder) to draw it on the page. It *should* be reading the width/height from the original image file itself.

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Location
    Leipzig, Germany
    Posts
    75
    Vote Rating
    1
    A.Rothe is on a distinguished road

      0  

    Default


    The image was named as *_16.png, so I thought it is 16x16, but it was 32x32. So the
    IconHelper.createPath(String) always generate code for 16x16 images (see javadoc) and it seems that it returns some wrong things, if the image is bigger than 16x16. As the alternative the safe HTML code contains a src attribute which defines clear.cache.gif, which has been displayed instead of the resource image.

Thread Participants: 1

Tags for this Thread