El panel cuenta con la posibilidad de agregarle una barra de herramientas en la parte superior, el tema de hoy muestra como realizar esto además veremos un poco acerca de cómo utilizar los botones y menús de Ext JS.

Material de apoyo

Para continuar es necesario descargar el material de apoyo, descomprimir y copiar el contenido a la carpeta “panels” que creamos al inicio de este capítulo, la cual está dentro de la carpeta “curso” en el servidor Web que hemos instalado en el primer capítulo. El material de apoyo es un HTML que importa al Framework de Ext JS y además tiene definidas unas clases de CSS que utilizaremos más adelante, hay un archivo JS en blanco, dentro de este vamos a escribir el código del tutorial y también viene una carpeta con iconos que vamos a usar para los botones. El ejercicio que haremos será simular un explorador Web, utilizando una barra de herramientas para los botones necesarios, vamos a usar un iFrame para desplegar las páginas que mediante la barra de herramientas le estaremos indicando.

Ext JS 3.0

A partir de este tema vamos a utilizar la versión 3.0 del Framework de Ext JS, así que si no lo tienes hay que descargarlo y copiarlo a nuestro servidor Web dentro de la carpeta “curso” donde estamos alojando los ejemplos de este curso.

Empaquetando el tutorial

Vamos a empaquetar el código del tutorial para evitar conflictos en el futuro.

//the namespace for this tutorial
Ext.ns('com.quizzpot.tutorial');

//the blank image
Ext.BLANK_IMAGE_URL = '../ext-3.0-rc1/resources/images/default/s.gif';

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

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

Barra de herramientas

Vamos a crear una ventana que contenga una barra de herramientas en la parte superior de la siguiente manera:

this.win = new Ext.Window({
	title: 'Quizzpot Explorer',
	width: 600,
	height:450,
	tbar: [  // <--- ToolBar
		{text:'Back'}, // <--- Buttons
		{text:'Forward'},
		{text:'Reload'},
		{text:'Stop'},
		{text:'Home'}
	],
	maximizable: true,
	maskDisabled: true,
	bodyStyle: 'background-color:#fff',
	html: '<iframe id="container" src="http://www.google.com" style="width:100%;height:100%;border:none"></iframe>'
});
		
this.win.show();

El código anterior crea una ventana con un iFrame donde muestra la página de Google, además tiene algunas otras propiedades que ya las hemos estudiado en temas anteriores por lo tanto no las explicaré ahora, en este tema quiero concentrarme en la propiedad “tbar” la cual es la responsable de asignarle al panel (recuerda que “Window” hereda las propiedades del “Panel”) una barra de herramientas en la parte superior, la cual contiene botones en este caso. La propiedad “tbar” acepta un arreglo de botones o un objeto de configuración para el componente “Ext.Toolbar” o una instancia del componente “Ext.Toolbar”, por lo tanto el código anterior lo podemos escribir también de la siguiente manera:

this.win = new Ext.Window({
	title: 'Quizzpot Explorer',
	width: 600,
	height:450,
	tbar: {
		items: [
			{text:'Back'},
			{text:'Forward'},
			{text:'Reload'},
			{text:'Stop'},
			{text:'Home'}
		]
	},
	maximizable: true,
	maskDisabled: true,
	bodyStyle: 'background-color:#fff',
	html: '<iframe id="container" src="http://www.google.com" style="width:100%;height:100%;border:none"></iframe>'
});
		
this.win.show();

En el código anterior la propiedad “tbar” recibe un objeto de configuración para el componente “Ext.Toolbar”, esto es útil para cuando necesitamos utilizar la propiedad “defaults” que hemos estudiado en el tema de los paneles, además podemos utilizar todas las propiedades del componente (Toolbar). Ahora voy a mostrar como la propiedad “tbar” acepta una instancia del componente Toolbar:

//creates the tool bar
var toolbar = new Ext.Toolbar({
	items: [
		{text:'Back'},
		{text:'Forward'},
		{text:'Reload'},
		{text:'Stop'},
		{text:'Home'}
	]
});
		
this.win = new Ext.Window({
	title: 'Quizzpot Explorer',
	width: 600,
	height:450,
	tbar: toolbar, // <--- Toolbar
	maximizable: true,
	maskDisabled: true,
	bodyStyle: 'background-color:#fff',
	html: '<iframe id="container" src="http://www.google.com" style="width:100%;height:100%;border:none"></iframe>'
});
		
this.win.show();

Como se han dado cuenta, estas tres maneras de crear una barra de herramientas son muy convenientes para diferentes situaciones, vamos a utilizar la última para continuar con nuestro ejercicio.

Agregar íconos a los botones

Para agregar un ícono a un botón necesitamos crear una clase CSS donde asignaremos el ícono que queremos usar como background, vamos a definir que no se repita y ponerle la propiedad “!important” para que se pueda mostrar correctamente:

.back{
	background: url(icons/arrow_left.png) no-repeat !important;
}

Ahora usamos la propiedad “iconCls” del objeto de configuración para la nuestro “toolbar”.

var toolbar = new Ext.Toolbar({
	items: [
		{text:'Back',iconCls:'back'}, //<--- adding an icon to the button
		{text:'Forward'},
		{text:'Reload'},
		{text:'Stop'},
		{text:'Home'}
	]
});

Vamos a agregar el resto de los iconos a los botones faltantes; las clases de CSS han sido definidas en el HTML.

var toolbar = new Ext.Toolbar({
	items: [
		{text:'Back',iconCls:'back'},
		{text:'Forward',iconCls:'forward'},
		{text:'Reload',iconCls:'reload'},
		{text:'Stop',iconCls:'stop'},
		{text:'Home',iconCls:'home'}
	]
});

Por defecto la alineación del ícono es la parte izquierda del botón, esto lo podemos configurar mediante la propiedad “iconAlign” la cual acepta como valor “top”, “right”, “bottom” o “left”. Voy a utilizar la propiedad “defaults” del toolbar para aplicar esta configuración a todos los botones.

var toolbar = new Ext.Toolbar({
	defaults:{
		iconAlign: 'top' // <--- we change the icon position
	},
	items: [
		{text:'Back',iconCls:'back'},
		{text:'Forward',iconCls:'forward'},
		{text:'Reload',iconCls:'reload'},
		{text:'Stop',iconCls:'stop'},
		{text:'Home',iconCls:'home'}
	]
});

Al hacer este cambio podemos ver como ha cambiado la posición del ícono, ahora se encuentra en la parte superior del botón, pero notemos que el ícono está alineado a la izquierda, para corregir esto necesitamos centrarlo desde la clase CSS donde definimos la imagen.

.back{
	background: url(icons/arrow_left.png) center 0px no-repeat !important;
}

Con esto veremos como los iconos se han centrado en el botón.

Botones alineados a la derecha

Cuando necesitemos que los botones estén alineados a la derecha del panel, únicamente debemos utilizar el componente “Ext.Toolbar.Fill” para que nos posicione los botones en el lugar correcto.

var toolbar = new Ext.Toolbar({
	defaults:{
		iconAlign: 'top'
	},
	items: [
		{text:'Back',iconCls:'back'},
		{text:'Forward',iconCls:'forward'},
		{text:'Reload',iconCls:'reload'},
		{text:'Stop',iconCls:'stop'},
		{text:'Home',iconCls:'home'},
		new Ext.Toolbar.Fill(), // <--- we fill the empty space
		{text:'Bookmarks',iconCls:'book'}// now the fallowing buttons are in the right side
	]
});

También podemos utilizar el atajo “->” para el componente “Ext.Toolbar.Fill”, de esta manera escribiremos menos.

var toolbar = new Ext.Toolbar({
	defaults:{
		iconAlign: 'top'
	},
	items: [
		{text:'Back',iconCls:'back'},
		{text:'Forward',iconCls:'forward'},
		{text:'Reload',iconCls:'reload'},
		{text:'Stop',iconCls:'stop'},
		{text:'Home',iconCls:'home'},
		'->', // <--- shortcut for the Ext.Toolbar.Fill class
		{text:'Bookmarks',iconCls:'book'}// now the fallowing buttons are in the right side
	]
});

Una caja de texto en la barra de herramientas

Vamos agregar una caja de texto a la barra de herramientas para que el usuario pueda introducir una dirección y al darle clic en el botón buscar o presionar la tecla “enter” el iFrame muestre la página solicitada.

var toolbar = new Ext.Toolbar({
	defaults:{
		iconAlign: 'top'
	},
	items: [
		{text:'Back',iconCls:'back'},
		{text:'Forward',iconCls:'forward'},
		{text:'Reload',iconCls:'reload'},
		{text:'Stop',iconCls:'stop'},
		{text:'Home',iconCls:'home'},
		'-', // <--- add a vertical separator bar between toolbar items 
		{xtype:'textfield',id:'url',width:250,enableKeyEvents:true}, //<--- the textfield
		{iconCls:'goto'},
		'->', 
		{text:'Bookmarks',iconCls:'book'}
	]
});

El código anterior tiene tres puntos importantes, primero se está agregando un separador vertical utilizando un guión, este es un atajo para la clase “Ext.Toolbar.Separator”, el segundo punto importante es que se está modificando el “xtype” del botón por “textfield” (para este caso), de esta manera cambiamos el tipo de componente especificando en este caso usaremos una caja de texto en lugar del botón, el tercer punto importante es que estamos definiendo un botón que no tiene texto, únicamente tiene un ícono.

Agrupando botones

La nueva versión de Ext JS (v 3.0) nos permite formar grupos de botones, esto es muy útil para separar por funcionalidad los botones semejantes o que se relacionan de una u otra manera, para este ejemplo vamos agrupar la caja de texto y el botón buscar.

var toolbar = new Ext.Toolbar({
	defaults:{
		iconAlign: 'top'
	},
	items: [
		{text:'Back',iconCls:'back'},
		{text:'Forward',iconCls:'forward'},
		{text:'Reload',iconCls:'reload'},
		{text:'Stop',iconCls:'stop'},
		{text:'Home',iconCls:'home'},
		'-',{
			xtype: 'buttongroup', // <--- grouping the buttons
			items:[
				{xtype:'textfield', id:'url', width:250, enableKeyEvents: true},
				{iconCls:'goto'}
			]
		},
		'->', 
		{text:'Bookmarks',iconCls:'book'}
	]
});

También podríamos ponerle un título al grupo usando la propiedad “title” al componente “buttongroup”, pero para este ejemplo no lo haremos, puedes probar si lo deseas y ver el resultado.

“Split buttons” y menús

Vamos hacer que el botón “back” muestre un menú donde aparezcan los sitios que hemos visitado, simulando el historial de navegación.

var toolbar = new Ext.Toolbar({
	defaults:{
		iconAlign: 'top'
	},
	items: [
		{
			text:'Back',iconCls:'back',
split: true, // <--- split the button
			menu:{ // <--- add a menu to the button
				items: [
					{text:'Yahoo!'}, // <--- This is an item for the menu
					{text:'Quizzpot'},
					{text:'Site point'}
				]
			}
		},
		{text:'Forward',iconCls:'forward'},
		{text:'Reload',iconCls:'reload'},
		{text:'Stop',iconCls:'stop'},
		{text:'Home',iconCls:'home'},
		'-',{
			xtype: 'buttongroup',
			items:[
				{xtype:'textfield', id:'url', width:250, enableKeyEvents:true},
				{iconCls:'goto'}
			]
		},
		'->', 
		{text:'Bookmarks',iconCls:'book'}	]
});

El código anterior muestra como se ha agregado un menú al botón “back”, es importante mencionar que cada opción del menú puede tener otro submenú.

Asignar acciones a los botones

Hasta ahora tenemos lista la GUI de nuestro explorador, pero no hace absolutamente nada, a continuación voy a mostrar como es que podemos asignarle acciones a los botones al momento de darles clic. Voy a modificar el botón “Home” para que cuando el usuario de clic sobre el botón nos lleve hacia la página de inicio, en este caso “google.com”.

//… código removido por cuestiones de simplicidad
{
text:'Home', iconCls:'home', 
handler: function(){
this.gotoUrl('http://www.google.com');
}.createDelegate(this)
},
//… código removido por cuestiones de simplicidad

La propiedad “handler” recibe una función donde podemos escribir todas las acciones que necesitamos realizar cuando el usuario de clic sobre el botón, el método “createDelegate” es muy importante para cambiar el scope de la función anónima, de esta manera la variable “this” hará referencia al objeto donde está el método “gotoUrl” (ToolbarTutorial), dentro de la función anónima estoy mandando a ejecutar una función que todavía no he definido, pero su propósito será cambiar el “src” del iFrame. Vamos a definir la función responsable de mostrar la página solicitada, este método lo usaremos en varias ocasiones.

com.quizzpot.tutorial.ToolbarTutorial = {
	init: function(){
		//código removido por cuestiones de simplicidad
	},
	//esta función cambia la url del iFrame
gotoUrl: function(url){
		if(!Ext.isEmpty(url)){
			if(!/^http:\/\//.test(url)){
				url = 'http://'+url;
			}
			
			var iframe = Ext.get('container');
			iframe.dom.src = url;
			Ext.getCmp('url').setValue(url);
			this.win.setTitle(url +' - Quizzpot Explorer');
		}
	}
}

La función anterior primero verifica que el parámetro “url” tenga algo, luego se asegura de que comience con “http://” de no ser así se lo agrega, luego cambia la propiedad “src” del iFrame y le asigna la url a la caja de texto y al título de la ventana. Ahora voy a modificar el botón “Search” para que cuando el usuario de clic sobre él, tome lo que hay en la caja de texto y llame a la función “gotoUrl”.

{iconCls:'goto',handler: this.search.createDelegate(this)}

En el código anterior no creé una función anónima, sino que le asigné una función del objeto “ToolbarTutorial” la cual vamos a definir a continuación:

com.quizzpot.tutorial.ToolbarTutorial = {
	init: function(){
//… no se muestra el código para simplificar las cosas
	},
	
	search: function(btn,event){
		this.gotoUrl(Ext.getCmp('url').getValue()); //<--- se toma lo que el usuario puso en la caja de texto
	},
	
	gotoUrl: function(url){
		//… no se muestra el código para simplificar las cosas
	}
}

La función “search” únicamente invoca a la función “gotoUrl” con lo que hay en la caja de texto.

Conclusiones

En el tema de hoy vimos como crear una barra de herramientas, como usar los botones y como crear menús, además vimos como ponerles comportamiento a los botones, si hay alguna duda al respecto pueden realizarla en el foro o bien dejar sus comentarios en esta misma página.

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!