Definición de la imágen spacer y su importancia Más videos
Descripción del tema
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.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo 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!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
14Comentarios
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,
tengo un incomvniente con mis ejercicios, no aparecen las ventanas, en el ejemplo de este tutorial no me cargaba la ventana e intente configurarlo pero me fue imposible, saludos, muy buen tuto
Seguramente no estas importando correctamente los estilos, te recomiendo ver el tema donde explico como instalar correctamente el framework, si ese no es tu problema registrate en los foros para platicar mejor. saludos :D
Son unos aportes excellentes son buenos Videos....Saludos desde Peru.. Y que sigas.. adelante...Muxas gracias..
Una consulta: He sustituido el s.gif por un 035.png que es una carita sonriente, y el resultado ha sido una doble carita sonriente sin el signo + y la carpeta del s.gif, ¿por qué se repite dos veces la carita de 035.png?
Porque la imagen "s.gif" es de color transparente, y es usada para dar espacio en algunos componentes, además, mediante CSS le asignan un background con la imagen que se quiere mostrar, entonces, si sustitulles esa imagen transparente por una no transparente, los íconos y algunas otras cosas mas dejarán de verse correctamente.
Crysfel muchas gracias por contestarme. ¿Pero entonces donde debo sustituir la imagen 035.png de la carita por la de la carpeta (por defecto) y que correctamente aparezca el signo + ?
Hola, primero que nada muchas gracias y 'demasiadas' felicidades por apoyar la expansión del conocimiento de forma libre y gratuita, me da gusto saber de espacios así... estaba comenzando con mi blog, pero por falta de tiempo y más que nada de conocimiento me he quedado sólo en eso 'el comienzo'.... Y comentando sobre el tema, gracias de nuevo, porque me pasó al principio que cuando se cayó la red no sabía porque no se cargaban algunas partes... busqué y medio leí, pero no tuve una explicación clara, sencilla y precisa como esta... Felicidades!
Hola, primero que todo, muchas gracias por este curso, esta Excelente =D Mi pregunta es: Hay una forma de definir la ruta a esta imagen permanentemente? Si la hay, crees que es conveniente hacerlo? por qué ?
Hola Crysfel, He vuelto a retomar el curso y he empezado desde cero pero con la versión 3.0, decirte que este problema de la imagen s.gif ya está resuelto o por lo menos yo no he visto dicha petición a los servidores de extjs. Saludos.
Hola Crysfel, desde ya, gracias por todo el esfuerzo que has puesto en este trabajo. Soy novato en Ext-Js, recien estoy intentando ejecutar este ejemplo, pero no se despliega el arbol que según señalas en este post. Respecto a la instalación, segui los pasos letra a letra indicados por ti. ¿que sugerencias me puedes entregar para solucionar mi problema?. Saludos. Juano.
Hola Juano. Te recomiendo inscribirte en el foro (http://foro.quizzpot.com) donde podrémos platicar mejor y mas usuarios podrán ayudarte :D saludos
asi es yo uso la 3.1 y todas las cargas son del servidor local..
Asegurate de bajar la version correcta extjs-2.2 para el curso.