how to test for missing resource

[garrettweinberg]

Hi all,

Here's a hopefully quick one for those with more Sencha Touch / Ext experience than I have. How would I programmatically test for the existence of a remote resource, say an image? In other words how do I forestall an HTTP 404 before it happens and perform some default action, say swapping in a default image?

Thanks in advance,
Garrett

[mitchellsimoens]

<img> tag will fire an error event and Ext.Img listens to that and fires an error event on the component if you use Ext.Img.

[garrettweinberg]

Thanks, Mitchell. Two things. Rather than Ext.Img, I'm using a plain Ext.Component with an <image> tag in its tpl. I assume that doesn't matter. Secondly, where would I catch this error? Will it be thrown when I invoke setData() on the component?

[garrettweinberg]

The 404 happens during setData() according to my stack trace, but no exception is thrown.

[garrettweinberg]

Hello? Mitchell?...Anyone? I cannot catch a 404 during Component.setData() by the normal try{} catch{} means.

[garrettweinberg]

I ended up fixing this using plain HTML/JS, but would appreciate knowing about a more Ext-ish way to handle this. The idea is to use the onerror attribute of the <img> element to default to your fall-back image. It works fine with tpl's rather than hard-coded html.

function ImgError(source): {
    source.src = "resources/images/img_music_generic.png";
    source.onerror = "";
    return true;
}

<img src="someimage.png" onerror="ImgError(this);" />