Component not rendering?

[jadrake75]

I wanted to use image bundles to represent the image in a Grid using GXT 2.0. Prior to support for widgets, I used a simple <span ..><img src="..."/></span> block as HTML output. Since there is no IconSupported class that represents an image component I created one called "Image". I used Button as the basis for the design. I am having a problem though... the img and span tags do not seem to get added to the DOM. I tried debugging this and I do see the proper progression of the component created (the <span> tag in the onRender( ) followed by the call of the setIcon in the afterRender which correctly inserts the <img>) but the <span> element does not appear to become attached to the DOM. Using a DOM inspector I was unable to locate it (I am setting the ID specifically). Any hlep would be a great assistance!



package org.javad.client.stamp.components;
import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.core.Template;
import com.extjs.gxt.ui.client.util.IconHelper;
import com.extjs.gxt.ui.client.widget.BoxComponent;
import com.extjs.gxt.ui.client.widget.IconSupport;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.AbstractImagePrototype;
public class Image extends BoxComponent implements IconSupport {

private AbstractImagePrototype icon = null;
private El wrapperEl = null;

@Override
public AbstractImagePrototype getIcon() {
return icon;
}

@Override
public void setIcon(AbstractImagePrototype icon) {
if (rendered) {
if (wrapperEl.selectNode("img") != null) {
wrapperEl.selectNode("img").remove();
}
if (icon != null) {
Element e = (Element) icon.createElement().cast();
wrapperEl.insertFirst(e);
El.fly(e).makePositionable(true);
El.fly(e).alignTo(wrapperEl.dom, "tl-tl", null);
}
}
this.icon = icon;
}

@Override
public void setIconStyle(String icon) {
setIcon(IconHelper.create(icon));
}

@Override
protected void afterRender() {
super.afterRender();
setIcon(icon);
}

@Override
protected void onRender(Element target, int index) {
Template template = new Template("<span id='{0}'></span>");
setElement( template.create(getId()), target, index);
super.onRender(target, index);
wrapperEl = el();
}
}

[jadrake75]

A further update (not sure why I didn't check this before). It is only not showing up in MSIE (either hosted browser or standalone). In Firefox I do get the span tags as I would expect.

[jadrake75]

Some further info.... debugging this on MSIE 8 (with the Developer Tools)

There is a bunch of stuff that is showing up in MSIE that is not showing up in Firefox. In firefox, it is a plain <span id="catalogueNumbers-setActive"> but in MSIE I get a __listener and __eventBits. Note the invalid HTML created inside the __listener quotes (ie. quotes within the quotes).




<span id="catalogueNumbers-setActive" __listener="<SPAN id=catalogueNumbers-setActive __eventBits="112"><IMG style="POSITION: absolute; WIDTH: 16px; BACKGROUND: url(http://192.168.100.50:8888/org.javad.StampWebEditor/844AEAFE3F99C47B1274654153EC61D7.cache.png (http://192.168.100.50:8888/org.javad.StampWebEditor/844AEAFE3F99C47B1274654153EC61D7.cache.png)) no-repeat -224px 0px; HEIGHT: 16px; TOP: 3px; LEFT: 5px" border=0 src="http://192.168.100.50:8888/org.javad.StampWebEditor/clear.cache.gif"></SPAN (http://192.168.100.50:8888/org.javad.StampWebEditor/clear.cache.gif%22%3E%3C/SPAN)>" __eventBits="112">
<img style="position: absolute; width: 16px; background: url(http://192.168.100.50:8888/org.javad.StampWebEditor/844AEAFE3F99C47B1274654153EC61D7.cache.png (http://192.168.100.50:8888/org.javad.StampWebEditor/844AEAFE3F99C47B1274654153EC61D7.cache.png)) no-repeat -224px 0px; height: 16px; top: 3px; left: 5px;" src="http://192.168.100.50:8888/org.javad.StampWebEditor/clear.cache.gif (http://192.168.100.50:8888/org.javad.StampWebEditor/clear.cache.gif)" border="0" complete="complete"/>
</span>

[jadrake75]

Ok, I was able to find a solution that works for Chrome, Firefox and MSIE..... The problem appeared to be caused by the height of the wrapper element not being set (therefore in IE it was rendering as a 0x0 sized component). I also changed it from a inline to box element. Essentially, upon rendering the image (after insertion) if I detect that the browser is IE and the size is not defined (since I could theoretically state that the image is to clip to 12x12), I will set the <div> to the size of the image.

This gives me the following, which works successfully in the three browsers....




package org.javad.client.stamp.components;


import com.extjs.gxt.ui.client.GXT;

import com.extjs.gxt.ui.client.core.El;

import com.extjs.gxt.ui.client.core.Template;

import com.extjs.gxt.ui.client.util.IconHelper;

import com.extjs.gxt.ui.client.widget.BoxComponent;

import com.extjs.gxt.ui.client.widget.IconSupport;

import com.google.gwt.user.client.Element;

import com.google.gwt.user.client.Event;

import com.google.gwt.user.client.ui.AbstractImagePrototype;



publicclass Image extends BoxComponent implements IconSupport {


private AbstractImagePrototype icon = null;
private El wrapperEl = null;


@Override

public AbstractImagePrototype getIcon() {
returnicon;
}


@Override

publicvoid setIcon(AbstractImagePrototype icon) {
if (rendered) {
if (wrapperEl.selectNode("img") != null) {
wrapperEl.selectNode("img").remove();
}
if (icon != null) {
Element e = (Element) icon.createElement().cast();
wrapperEl.insertFirst(e);
El e_img = El.fly(e);
e_img.makePositionable(true);
e_img.alignTo(wrapperEl.dom, "tl-tl", null);
if( GXT.isIE && (width == null && height == null) ) {
int w = e_img.getWidth();
int h = e_img.getHeight();
El.fly(e.getParentElement()).applyStyles("height:" + h + "px; width:" + w + "px;");
}
}
}
this.icon = icon;
}


@Override

publicvoid setIconStyle(String icon) {
setIcon(IconHelper.create(icon));
}

@Override

protectedvoid afterRender() {
super.afterRender();
setIcon(icon);
}



@Override

protectedvoid onRender(Element target, int index) {
Template template = new Template("<div id=\"{0}\"></div>");
setElement( template.create(getId()), target, index);
super.onRender(target, index);
wrapperEl = el();
sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS | Event.FOCUSEVENTS);
}
}