Definición de la imágen spacer y su importancia
Feb 17, 2009 | Español | By Crysfel | 13 Comments | Read in EnglishLos componentes de Ext JS utilizan una imagen GIF de 1px por 1px en color transparente para generar espacio y colocar iconos o separadores, es necesario saber esto para evitar problemas en el futuro.
Author: Crysfel
I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter
Introducción
Es importante saber sobre la imagen que Ext JS utiliza para generar espacios, pues algunas veces los componentes no se visualizarán correctamente si no tenemos conexión a Internet; esto ocurre por que este GIF está alojado fuera de nuestro servidor, en este tema hablaré de cómo solucionar esto.
Material de apoyo
Antes de continuar es necesario descargar el material de apoyo en la parte superior derecha de la pantalla, una vez descargado descomprime el ZIP y copia el HTML dentro de la carpeta “instalacion” que creamos al principio del curso. Lo siguiente es ir al explorador y ejecutar el ejemplo.
Al abrir el HTML en el explorador aparece una ventana que contiene una estructura de árbol en su interior, este ejemplo es muy sencillo, simplemente muestra esos componentes que no tienen funcionalidad alguna.
¿Imagen externa?
Si abrimos el Firebug en la pestaña de NET, podremos ver los recursos que se están usando para generar lo que vemos en pantalla; por ejemplo el ext-base.js, el ext-all.js y algunas otras imágenes, todas estas alojadas en nuestro servidor local, pero hay una imagen que se esta cargando desde www.extjs.com, ¡ésta es la imagen de la que estamos hablando en este tema! La pregunta aquí es, ¿por qué no cargarla desde mi servidor local? La respuesta es sencilla, no se esta cargado de nuestro servidor local por que ¿cómo sabría el Framework de Ext JS donde está? Por eso se está cargando desde otro servidor donde él SI sabe que está.
Definiendo la ruta en nuestro servidor
En ocasiones nuestros sistemas o aplicaciones no tienen acceso a Internet, en este caso los componentes no podrán desplegarse correctamente debido a que no se puede descargar la imagen “s.gif”. Para solucionar esto es necesario indicarle al Framework donde encontrar esta imagen en nuestro servidor.
La imagen “s.gif” se encuentra dentro de la carpeta misma de Ext JS (ext-2.2). La ruta es ext-2.2\resources\images\default\s.gif, esta ruta se la debemos colocar dentro del HTML que descargamos (spacer.html) de la siguiente manera:
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
BLANK_IMAGE_URL es una constante que contiene la ruta a la imagen spacer, esta línea de código se debe colocar antes de comenzar a crear los componentes, es decir, se debe poner al principio del documento.
Conclusiones
Este tema es muy básico, pero he conocido a muchos desarrolladores que no saben acerca de esto, es por eso que me parece importante mencionarlo en el primer capítulo de este curso.
Otro punto a tomar en cuenta es que al definir la ruta en nuestro servidor la descarga es mucho más rápida que descargar la imagen desde extjs.com, con esto lograremos que los componentes se desplieguen más rápido.
tienes razon no sabia que esas imagenes de descargan desde la pagina oficial pense que el la carpeta traian todas las imagenes el problema es, como se cuales imagenes son? o no?? y donde puedo encontrar skin o cuerpos para mi aplicaciones con extJs???
Salu2 desde ECUADOR,