1 pixel Gif as a new measure tool? o_O BLANK_IMAGE_URL what is it for?

Question

I'm reading ExtJs documantaion.. there is a BLANK_IMAGE_URL property... documantation says that it's a link to 1 pixel transparent Gif, that allow to corect measurements...

How can i mesure something by 1 pixel Gif? And why is it important?

PS: or maybe it's a big joke of ExtJs developers.. you know.. "Ha ha! one more idiot set BLANK_IMAGE_URL, what a moron!" :)

Answer 1

The installation guidelines for ExtJS 2 and 3 advise you to host the image yourself and in ExtJS 4 the image has even been replaced with a data uri scheme (data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==) so it most likely isn't a tracking image but is actually used to measure with.

The (not yet complete) ExtJS 4 docs give a better explanation:

URL to a 1x1 transparent gif image used by Ext to create inline icons with CSS background images. In older versions of IE, this defaults to "http://extjs.com/s.gif" and you should change this to a URL on your server. For other browsers it uses an inline data URL

this is used in the setIconCls function for example. Inthere an <img> tag is created with Ext.DomHelper that has this BLANK_IMAGE_URL as src and the actual icon as background. This way it's easier to scale, measure and put dimensions on it rather than using a <div> or <span> and floating or positioning it all around the space to get the right dimensions.

// Ext.Panel.setIconClass
setIconClass : function(cls){
    // Snip ...
    Ext.DomHelper.insertBefore(hdspan.dom, {
        tag:'img', 
        alt: '', 
        src: Ext.BLANK_IMAGE_URL, 
        cls:'x-panel-inline-icon '+cls
    });
    // Snip ...
}

Answer 2

1px image is simplest form of creating/filling areas of web page. This is existing from long time. Here is how it works.

You want to have a strip (img) to fill a certain area (div), so that it won't collpase. Also, other items feel its presence and adjust automatically. In those cases, instead of using empty div with fixed height and width, it is best to put an image (1px) in that div, and set the image height and width as you wish.

Since, it is a 1px single color, I doesn't matter how you stretch it, it don't loose quality, and solves the purpose.

rendering of Div or any element varies from browser to browser, and hard to achieve precision across browsers. But, if it is an Image tag, we can reasonably expect same look in any browser.