Javascript: Ext, SSL, S.gif and D'Oh!

tiistaina, maaliskuuta 04, 2008

I was working on a UI with Ext last Friday and everything was going smoothly until suddenly my tree control had a lot of broken images. I was pretty confused by all of this because everything was working 5 minutes earlier. I then tried to visit the forums and found that my internet connection was down.
Ext exposes a system wide setting called Ext.BLANK_IMAGE_URL for pulling in a spacer image called s.gif. You’ll find the image under/resources/images/default. Ext has a default value for the field that points back so that your application degrades gracefully. You may only notice a problem if you happen to be looking at the URLs of your image through firebug.
SSL adds a wrinkle as your IE users will get popups asking whether the browser should display insecure objects. This is obviously caused by the fact that you are not loading all of the page’s dependencies from the same SSL domain. Setting theExt.BLANK_IMAGE_URL solves the problem.
Why would someone create this setting? First, toss out any nefarious belief that it is to get information about you or your users. While that is possible, as we all know from using Google Analytics, it isn’t actually useful information beyond finding out that your framework is popular. The real purpose is that it is not possible to hard code a good default value that runs within the same application’s context. This setting is not hidden either. It is the first property in the Ext object’s documentation and it is described again in a FAQ.

function main() {
Ext.BLANK_IMAGE_URL = '/ext-2.0.2/images/ext/resources/images/default/s.gif';
// rest of app goes here
Ext.onReady( main );
The path to the s.gif will vary from one application to the next. Java developers will have to specify their web application’s context and the path to Ext before being able to pickup the s.gif while PHP developers may only have to specify the path to Ext. There is nothing to say that a developer will not change the name of Ext’s root directory either. The effect is that no default value will work consistently. Ext chose to host the file on their own servers so that you would be able to get up and running more quickly.
I spent ten minutes researching it and then wondered why I wasn’t getting this error from another component in the same application. Turns out that I had run into this problem before and solved it in that other application. I quietly banged my head on the desk, vowed not to tell my coworkers and then wrote this.

You Might Also Like