En el tutorial de hoy se explica cómo se puede crear más de un campo editable en una sola fila, esto es un caso muy típico cuando capturamos campos como un teléfono, una tarjeta de crédito, etc. Por medio del componente “CompositeField” podemos separar la información de un campo en varios textfields en una misma fila, esto nos ayuda a mejorar la interfaz de nuestra aplicación. Esta es una muestra de lo que se obtendrá al final de este tutorial. Recuerda que puedes descargar el código fuente si es necesario.

La base de datos

Para este ejemplo usaremos una base de datos solo para guardar los nuevos registros que se creen. La base de datos solo contiene una tabla llamada “friends” que es donde se guardará la información. Actualmente se encuentra vacía.

-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
--
-- Servidor: localhost
-- Tiempo de generación: 20-10-2010 a las 23:14:21
-- Versión del servidor: 5.1.36
-- Versión de PHP: 5.3.0

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Base de datos: `test`
--
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `friends`
--
CREATE TABLE IF NOT EXISTS `friends` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `lastname` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `email` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `phoneNumber` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=10 ;
--
-- Volcar la base de datos para la tabla `friends`
--

La base de datos se llama “test” pero puedes usar el nombre que te agrade, solo recuerda cambiar el nombre cuando se haga la conexión mediante PHP.

Empaquetando el tutorial

Vamos a encapsular el código para evitar conflictos con otras variables. Esto es algo muy importante y siempre lo debemos realizar.

Ext.ns("com.quizzpot.tutorials");

com.quizzpot.tutorials.compositeForm ={
	init : function(){
		//code...
	}
}
Ext.onReady(com.quizzpot.tutorials.compositeForm.init,com.quizzpot.tutorials.compositeForm);

La función “init” se ejecutará tan pronto como el DOM esté listo, por lo tanto ahí debemos colocar el código que necesitamos ejecutar primero.

Creando el formulario

Necesitamos un formulario por el cual se obtendrá la información de algún contacto del usuario. Lo primero que haremos es crear este formulario el cual contiene cuatro campos: nombre, apellido, correo electrónico y teléfono. Lo haremos de la siguiente manera:

this.form = new Ext.FormPanel({  step 1
	url		     : 'submit.php',  //step 2
	bodyStyle	: "padding : 10px",
	border		: false,
	defaults	: {anchor: "100%", allowBlank: false},
	items		: [ //step 3
			{xtype : "textfield", name : "first", fieldLabel : "Name", labelWidth : 20},
			{xtype : "textfield", name : "last", fieldLabel : "Lastname"},
			{xtype : "textfield", name : "email", fieldLabel : "E-mail",vtype : "email"},
			this.compositeFields ()],
});

En el paso uno creamos el formulario, esto es algo que ya hemos visto en tutoriales anteriores. En el paso dos se le pasa el parámetro “url” donde se realizará el submit del formulario con la información capturada. En el paso tres creamos los “textfield” de manera “lazy” por medio de su “xtype”, estos los usaremos para obtener la información que nos dará el usuario. Los primeros tres campos los creamos como lo hemos hecho siempre, notemos que el tercer campo cuenta con un “vtype", esto lo hacemos con la intención de verificar que el campo tenga la estructura básica de un correo electrónico. Si notamos al final del arreglo de “items” tenemos la función “compositeFields” la cual veremos en unos momentos. Así que la podemos comentar por el momento. Ya que tenemos nuestro formulario lo siguiente es crear la ventana donde lo mostraremos al usuario, lo haremos de la siguiente manera:

var win = new Ext.Window({
	title	: "Composite Form",
	layout	: "fit",
	width	: 400,
	height	: 200,
	items	: this.form,
   fbar	: [{text: "Save"}]

});
win.show();

La creación de una ventana ya es algo que se ha tratado en temas anteriores, por lo cual no entraremos en detalles. Pero si haremos notar que se le está colocando el formulario en el atributo “ítems”, también estamos creando un “fbar” que contiene el botón “Save”. Con esto tendríamos algo como lo que se muestra a continuación:

Función compositeFields

En esta función veremos cómo implementar los “CompositeField”, lo que esto nos permite es tener una cierta cantidad de campos de texto en una sola fila. Esto es posible a partir de la versión 3.X de Ext JS, a continuación veremos la implementación de esto.

compositeFields : function(){  //step 1
return{
		xtype	        : "compositefield", //step 2
		fieldLabel	: "Phone",
		defaults	: {allowBlank: false},
		border	      : false,
		items	        : [ {xtype : "displayfield", value:"("},  //step 3
			{xtype : "textfield", name : "phoneNum1", width: 30},  //step 4
			{xtype : "displayfield", value:") - "},
			{xtype : "textfield", name : "phoneNum2", width: 50},
			{xtype : "displayfield", value:" - "},
			{xtype : "textfield", name : "phoneNum3", width: 50}
				]
	};
},

En el paso uno creamos la función. En el paso dos creamos el componente “compositefield” por medio de su “xtype”, es importante mencionar que esto también se puede hacer realizando una instancia de “Ext.form.CompositeField” con el operador “new”. En el paso tres usamos un “displayfield” para mostrar algo de texto antes del “textfield”. Del paso cuatro en adelante se crean los “textfield” que se usarán para recibir la información del usuario. Notemos que entre cada “textfield” hay un “displayfield” esto es con el objetivo de dotar de mayor usabilidad al formulario. Con esto tendríamos algo como lo siguiente: Como podemos notar al usar un “CompositeField” podemos tener varios “textfields” en una sola fila, a diferencia de como siempre lo hemos hecho, colocándolos en diferentes filas.

Enviando la información

Ya que tenemos nuestro formulario listo, lo siguiente es guardar la información en la base de datos, lo primero que haremos será agregar un handler al botón “Save”, de esta manera podemos agregarle acciones para cuando el usuario de clic sobre este.

var win = new Ext.Window({
	title	: "Composite Form",
	layout	: "fit",
	width	: 400,
	height	: 200,
	items	: this.form,
	fbar	: [{text: "Save",handler:this.onSave,scope:this}]  //step 1

});
win.show();

En el paso uno agregamos el “handler” al botón, esta función se dispara cada vez que se da clic sobre el botón. En este ejemplo el “handler” tiene definida la función “onSave” la cual se encarga de hacer la petición Ajax al servidor enviando la información introducida por el usuario.

onSave :function(){
		
	this.form.getForm().submit({ 
		scope	: this,
		success	: this.showResults,
		failure	: function(response){
			console.debug(response);
			}
	});
},

Es importante mencionar que en el atributo “success” se emplea otra función que es showResults, lo que hace esta función es simplemente mandar un mensaje de alerta informándonos que todo salió bien, aquí también usamos la configuración “scope”, esto permite definir el contexto donde se ejecutará la función asignada al callback “success” y “failure”.

Guardado la información

En los pasos anteriores realizamos el “submit” al formulario una vez que el usuario da clic sobre el botón “Save”, ahora vamos a guardar la información en la base de datos. En el archivo “submit.php” escribimos el siguiente código:

<?php	//sptep 1
	$connection=mysql_connect("localhost","root","") or die("Connection Failed".mysql_error());
	mysql_select_db("test",$connection)or die("Error loading the DataBase".mysql_error());
	
	//step 2
	$name = $_POST["first"];
	$last = $_POST["last"];
	$email = $_POST["email"];
	$phone1 = $_POST["phoneNum1"];
	$phone2 = $_POST['phoneNum2'];
	$phone3 = $_POST['phoneNum3'];
	//step 3
	$phone = $phone1.'-'.$phone2.'-'.$phone3;
	
	//Se recomienda limpiar aquí las variables de entrada antes de guardarlas en a base de datos!!

	//step 4
	$query = sprintf("INSERT INTO friends(name,lastname,email,phoneNumber) values('%s','%s','%s','%s')",
		mysql_real_escape_string($name),
		mysql_real_escape_string($last),
		mysql_real_escape_string($email),
		mysql_real_escape_string($phone));
		
	$rs = mysql_query($query);
	
	echo json_encode(array(
		"success"	=> true
	));

En el paso uno se realiza la conexión a la base de datos, recuerda que debes poner las credenciales adecuadas así como la base de datos que usarás, en mi caso es “test”. En el paso dos recibimos vía POST la información introducida por el usuario, esta información fue enviada automáticamente al hacer “submit” al formulario que definimos en ExtJS. En el paso tres lo que hacemos es concatenar las tres partes del número telefónico, para que sea guardado como una sala cadena de caracteres. En el paso cuatro introducimos la información a la tabla “friends”. Es importante mencionar que se deben limpiar las variables antes de insertarlas a la base de datos, esto para evitar ataques XSS, existen liberías que te permiten realizar la limpieza de una manera sencilla.

Mensaje de éxito

Una vez que se ha guardado el nuevo contacto crearemos la función “showResult” que es el callback para cuando la comunicación ha sido satisfactoria, dentro de esta función solamente mandaremos un mensaje indicándole al usuario que su información ha sido guardada.

showResults	: function(response){
		Ext.Msg.alert("Alert"," Information has been saved!");
	}

Conclusión

En este tutorial vimos un uso básico del “CompositeField”, este componte nos ayuda a tener más de un “textfield” en la misma fila, esto es conveniente cuando queremos tener una cadena de caracteres dividida en varios campos editables, como el número telefónico en este ejemplo. Si tienes algún comentario o sugerencia no dudes en comunicarnolos viá el formulario inferior, por el foro o en alguna de las redes sociales como Twitter y Facebook.

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!