Una barra de estado nos puede ayudar para informar al usuario lo que está sucediendo en la aplicación. Eliminaron este componente en la versión 3.0 de Ext JS, argumentando que era lo mismo que un Toolbar y que el componente no merecía ser parte del Framework. En este tutorial voy a mostrar como podemos recrear una barra de status con Ext 3.0.

Material de apoyo

Antes de empezar es necesario descargar el material de apoyo, descomprimirlo y copiarlo al servidor Web que instalamos en el primer capítulo del curso. El ejercicio que haremos será agregar una barra de estado a un ventana, en la parte derecha tendrá un reloj, además la ventana tendrá un área de texto donde el usuario podrá escribir y mientras lo hace en la barra de estado aparecerá el conteo de las palabras y cuando deje de escribir se mostrará un mensaje de “guardando”, no vamos a guardar nada pues el objetivo es mostrar la forma de utilizar la barra de estado, puedes ver la demostración del ejercicio.

Empaquetando el tutorial

Lo primero que tenemos que hacer es empaquetar el código que vamos a escribir en este tutorial.

Ext.ns('com.quizzpot.tutorial'); 

com.quizzpot.tutorial.StatusbarTutorial = { 
	init: function(){
		//the code goes here
	}
}

Ext.onReady(com.quizzpot.tutorial.StatusbarTutorial.init,com.quizzpot.tutorial.StatusbarTutorial);

Crear la barra de estado

Para crear una barra de estado creamos una instancia del componente “Ext.Toolbar” y se la asignamos al componente Window mediante la propiedad “bbar”.

//creates the status bar
var statusbar = new Ext.Toolbar({ 
	items:['Ready!'] 
}); 
		 
this.win = new Ext.Window({ 
	title: 'Word Processor - Quizzpot', 
	width: 600, 
	height: 450, 
	bbar: statusbar, // <--- add the status bar to the window
	bodyStyle:'background-color:#fff', 
	items: [{ 
		xtype: 'textarea', 
		id: 'word-textarea', 
		style: 'width:100%;height:100%;border:none;', 
		enableKeyEvents: true 
	}] 
}); 
		 
this.win.show();

El código anterior crea una barra de herramientas que solamente tiene un texto (Ready!), luego crea una ventana (la cual hereda de Ext.Panel) a la cual le asigna la barra de estado mediante la propiedad “bbar”, además la ventana cuenta con un “textarea” donde el usuario podrá escribir, más adelante vamos a ponerle algunos eventos a este último componente. Hasta ahora nos debe aparecer en la pantalla del explorador algo semejante a la siguiente imagen.

Texto en el Statusbar

Lo que vamos a realizar en este paso es crear los contenedores de texto que vamos a estar usando.

//method vars 
var status = new Ext.Toolbar.TextItem({id:'status',text:'Ready!'}); 
var clock = new Ext.Toolbar.TextItem({id:'clock',text: '00:00:00 AM'}); 
// instance var 
this.words = new Ext.Toolbar.TextItem({id:'words',text:'0 words'}); 
		 
var statusbar = new Ext.Toolbar({ 
	items:[status,'->',this.words,'-',clock] 
});

El código anterior crea tres “TextItems”, estos son contenedores de texto que podemos insertarle a una barra de herramientas; lo estoy haciendo de esta manera porque necesito asignarle un “id” a cada ítem para luego tener acceso a ellos y modificar su contenido, luego se los estoy asignando a la barra de estado. Otro punto que es importante mencionar es que las variables “status” y “clock” están siendo creadas como variables del método mientras la variable “words” es una variable de instancia porque será utilizada en otro método del objeto “StatusbarTutorial” más adelante (todavía no he definido ese método). Hasta ahora debemos tener una pantalla semejante a esta:

Programando un reloj

Vamos a programar el reloj que mostraremos en la parte de la derecha, así que necesitamos crear una tarea que se ejecute cada segundo y modifique el texto del “TextItem clock” que definimos en el paso anterior.

// Start a simple clock task that updates a div once per second 
var updateClock = function(){ 
	Ext.getCmp('clock').setText(new Date().format('g:i:s A')); 
} 

//Configuration object for the task		 
var task = { 
	run: updateClock, //the function to run
   	interval: 1000 //every second 
} 

//creates a new manager 
var runner = new Ext.util.TaskRunner(); 
runner.start(task); //start runing the task every one second

En el código anterior primeramente se está creando una función o rutina que será ejecutada continuamente, en esta solamente se está actualizando el texto del “clock” con la hora actual del sistema; el segundo paso es crear un objeto de configuración para una tarea, donde es necesario definir dos parámetros, el “run” que es donde se define la función o rutina a ejecutar y el “interval” que es el tiempo en el cual se ejecutará continuamente, este tiempo se debe especificar en milisegundos; el tercer paso es crear una instancia del componente “TaskRunner” e iniciar la ejecución de las tareas deseadas, en este caso solamente estamos ejecutando una tarea, pero podemos ejecutar varias a la vez.

Contador de palabras

El siguiente paso será actualizar el contador de palabras cuando el usuario esté escribiendo, por lo tanto usaremos el evento “keypress” y “blur” para estar actualizando inmediatamente cuando el usuario ingresa una palabra nueva.

Ext.getCmp('word-textarea').on('keypress',this.countWords,this); 
Ext.getCmp('word-textarea').on('blur',this.countWords,this);

Mediante el método “getCmp” podemos tomar el componente por su identificador (id), y utilizarlo normalmente, luego agregamos el “listener” a los eventos mencionados anteriormente. Si has notado el segundo parámetro está haciendo referencia a un método de instancia el cual no hemos definido aún, y el tercer parámetro es el “scope” que le estamos asignando. Vamos a definir el método que se encargará de contar las palabras en el texto ingresado por el usuario inmediatamente después del método “init”.

, // <-- do not forget the comma between methods
	 
countWords:  function(textarea){ 
              var value = textarea.getValue(); //get the string
              var wc = 0; // word counter
                            
              if(!Ext.isEmpty(value)){ // if there is something in the textfield
		wc = value.match(/\b/g); //find the spaces 
		wc = wc ? wc.length / 2 : 0; //count the words
             } 
		 
	this.words.setText(wc + ' words'); //print the counter on the status bar
}

El código anterior toma el texto que ingreso el usuario, luego inicializa un contador para las palabras en cero, revisa si se ha introducido algo y cuenta las palabras buscando espacios y calculando el total de las palabras, por último actualiza la barra de estado con el nuevo valor, la pantalla nos debe quedar algo semejante a esto:

Auto guardado

Vamos a simular un “autosave” de lo que el usuario está escribiendo, esto lo haremos mostrando un mensaje de “Saving draft...” en la barra de estado y después de un segundo mostraremos la hora de la última vez que se guardó, no vamos a guardar en alguna base de datos por cuestiones de simplicidad, pero hacer esta implementación es muy sencilla ya que simplemente necesitas enviar el contenido de la caja de texto al servidor utilizando Ajax, cuando el servidor responda le avisas al usuario.

Ext.getCmp('word-textarea').on('keypress', function(textarea){ 
	var text = Ext.getCmp('status'); 
	text.setText('Saving draft...'); 
	(function(){ 
		    text.setText('Draft auto-saved at ' + new Date().format('g:i:s A')); 
	}).defer(2000); 
}, this, {buffer:3000});

Tenemos que escribir el código anterior dentro de la función “init” junto con los otros “listeners” que agregamos anteriormente; aquí quiero destacar que la función “on” acepta un objeto de configuración en el cuarto parámetro donde le estamos indicando la propiedad “buffer” la cual permite hacer un “delay” al ejecutar el “listener” de 3000 milisegundos; en otras palabras esta función se ejecutará cuando se presiona una tecla y pasen tres segundos, con esto evitamos que se ejecute por cada letra que el usuario introduce logrando guardar la información cuando hay una inactividad de tres segundos. Otro punto importante del código anterior es que estamos usando una función anónima la cual se ejecuta después de dos segundos, podía haber utilizado un “setTimeout”, pero quería mostrarles como utilizar el método “defer”.

Conclusiones

Aunque en la versión de Ext 3.0 eliminaron la barra de estado, aún podemos recrearla, precisamente por eso la borraron porque no tenía mucho sentido tener un componente que era prácticamente igual al “Toolbar”, por otro lado la comunidad de Ext ha creado un plugin para el “Statusbar” el cual trae algunos métodos para facilitar la tarea. Si tienes alguna duda o sugerencia la puedes hacer en los comentarios o si es más compleja puedes registrarte en los foros y podremos ayudarte entre todos.

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!