Pre-cargador para ExtJS

Esta técnica sirve para cualquier versión de ExtJS (es más, debería ser útil para casi cualquier framework JS) pero para este ejemplo usare ExtJS 5.1 con Sencha Cmd para generar un proyecto simple.

Este es el contenido de mi index.html.

Como ven, mi body está vacío. El tag script en el head carga bootstrap.js y este a su vez las dependencias. Al finalizar recién empieza la inicialización de la aplicación. Mientras todo esto ocurre el usuario solo ve una pantalla blanca. No hay indicadores que le informen que aún hay cosas por suceder.

Implementemos un pre-cargador. Algo, una animación o texto que le indique al usuario que la aplicación está siendo descargada.

Vamos a insertar una imagen GIF en el medio de la pantalla para que le indique al visitante que debe tener paciencia, que algo está preparándose, y cuando nuestra aplicación haya terminado de cargarse, eliminaremos esta animación del mismo DOM.

Empecemos por declarar el nuevo div que contendrá al pre-cargador en nuestro html.

Te habrás dado cuenta que he movido el tag script de  head a body. Esto es para reducir la prioridad de la carga de la aplicación. Al final, sospecho que no hay mucha diferencia ya que toda la implementación del pre-cargador la haremos en el html, pero por si acaso, lo hago así.

Ahora es buen momento para ubicar esa animación que será usada para indicar al visitante que debe ser paciente. Si aún no cuentas con una puedes conseguir la idónea en preloaders.net. Tiene un catálogo interesante de gifs que podemos usar.

Pasemos a implementar el estilo de nuestro pre-cargador. Pega lo siguiente justo antes de cerrar la etiqueta head.

Con esto ya tenemos el pre-cargador funcionando. Debemos pensar ahora en como ocultarlo cuando ya no lo necesitemos.

Para esto necesitamos agregar unas líneas en nuestro proyecto ExtJS.

En nuestro archivo app.js, ubicado en la raíz de nuestro proyecto, tenemos el método launch() que es ejecutado inmediatamente después que el administrador de dependencias termina su trabajo. Ignora el resto del código. Este es el mejor lugar para definir la orden de ocultar el pre-cargador.

Usamos Ext.get() para obtener los elementos que conforman el pre-cargador y usar el método fadeOut() de Ext.Element para ocultar suavemente los  div y eliminar el nodo al finalizar la animación (nótese la propiedad remove: true).

Basado en el ejemplo de Niklaus Gerber.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.