The Ext JS components use a GIF image of 1px by 1px in transparent color to generate space and to place the tabs and icons, it is important to know how to deal with this image to prevent future errors.

Introduction

It is important to know about the image that Ext JS uses to generate spaces, because sometimes the components will not be shown correctly if we don't have Internet connection; this happens because this GIF is hosted outside of our server, in this chapter I will be talking about how to solve this.

Resources

Before we continue it is necessary to download the resources, you can find them in the upper right of the screen. After you have downloaded the resources, unzip the file and copy the HTML inside of the folder "installation" that we have created at the beginning of the course. The next thing you need to do is open your favorite browser and execute the example. When you open the HTML in the browser a window will show with a tree structure inside, this example is very simple, it shows components that don't have any functionality.

External image?

If you open the Firebug in the NET tab, you will be able to see the resources that are being used to generate what we see in the screen; for example the ext-base.js, the ext-all.js and some other images, all this files are hosted in our local server, but there's one image that is being loaded from www.extjs.com, this is the image that we'll be talking about in this chapter! Now the question is, why do we have to load this image from www.extjs.com and not from our local server? The answer is simple, the image is not being loaded from our server because, how will the Ext JS Framework know where it is? This is the reason why this image is being loaded from other server when the Framework knows for sure that it is there.

Defining the path to our server

Sometimes our systems or applications don't have access to Internet, in this case the components can't be displayed correctly because the image "s.gif" can't be downloaded. To solve this issue we need to tell the Framework where to find this image in our server. The image "s.gif" can be found inside of the Ext JS folder (ext-2.2). The path is ext-2.2\resources\images\default\s.gif, we have to write this path inside of the HTML that we have downloaded (spacer.html) like this:

Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';

BLANK_IMAGE_URL is a constant variable that contains the path to the image spacer, this line of code must be written before the components are created, in other words, you must write it at the beginning of the document.

Conclusions

This topic was very simple, but I have know many developers that don't know about it, that's why I believe it is important to mention it in the first chapter of the course. One more thing you need to remember is that we you define the path in your server, the image will be downloaded a lot faster, this will ensure a faster rendering of the the components.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!