Aprendiendo Ext JS 3

Integración del FormPanel y el GridPanel Más videos

Descripción del tema

En esta ocasión vamos a Crear, Leer, Actualizar y Borrar (CRUD) un catalogo de contactos usando un formulario y mostrando los resultados en un “Grid” este es el que se encargara de hacer las operaciones antes mencionadas, con esto veremos otra aplicación básica de la integración de un FormPanel y el GridPanel, utilizando un Writer dentro del Store que maneja el Grid. En este tutorial haremos un CRUD para poder editar la información contenida en el Grid, esto lo lograremos mediante el Writter de un store y usaremos un formulario para poder editar esa información. La siguiente imagen es un ejemplo de lo que tendremos al final de este tutorial.
resultado final

Resultado Final

Durante el tutorial se irá explicando el código necesario para realizarlo, recuerda que puedes descargar el código fuente si te es necesario.

La Base de datos

La información para el Grid estará en una base de datos de MySQL que contendrá una tabla llamada “contacts”, en esta tabla solo tenemos la información básica de un contacto. El código para generar la tabla se muestra a continuación.
-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
--
-- Servidor: localhost
-- Tiempo de generación: 28-10-2010 a las 16:30:53
-- 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 `contacts`
--

CREATE TABLE IF NOT EXISTS `contacts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `firstName` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `lastName` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `age` varchar(3) COLLATE utf8_unicode_ci NOT NULL,
  `phone` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `country` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=5 ;

--
-- Volcar la base de datos para la tabla `contacts`
--

INSERT INTO `contacts` (`id`, `email`, `firstName`, `lastName`, `age`, `phone`, `country`) VALUES
(1, 'luiz@gmail.com', 'Luiz', 'Ortega', '19', '123 - 456 - 7893', 'Mexico'),
(2, 'sasha@gmail.com', 'Sasha', 'Cohen', '25', '123 - 456 - 7892', 'USA'),
(3, 'cr@gmail.com', 'Cristiano', 'Ronaldo', '24', '123 - 456 - 7891', 'Portugal'),
(4, 'john@hotmail.com', 'John', 'Smith', '21', '123 - 456 - 7894', 'USA');
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.

Exponer la información

Como la información está almacenada en una base de datos, necesitamos realizar la conexión vía PHP o cualquier otro lenguaje de servidor y un simple “SELECT” de la siguiente manera. El siguiente código se debe escribir en un archivo llamado “serverside/getContacts.php”.
<?php	//step 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());
	
	$result= mysql_query("SELECT * FROM contacts");  //step 2
	
	$data= array();
	
	while($row= mysql_fetch_array($result)){  //step 3
		array_push($data,array(
			"id"	=> $row["id"],
			"first"	=> $row["firstName"], 
			"last"	=> $row["lastName"], 
			"email"	=> $row["email"],	
			"age"	=> $row["age"],
			"phone"	=> $row["phone"],
			"country"=>$row["country"]
		));
	}

	echo json_encode(  //step 4
		array(  
		"success"	=> true,
		"data"		=> $data
	));
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 se hace el query que regresa todo lo que contiene la tabla “contacts”, es un query muy sencillo. En el paso tres se itera el resultset que regresó la consulta, dentro del ciclo creamos un arreglo con la información de cada uno de los contactos. En el paso cuatro se imprime la información en formato JSON, la respuesta será como el siguiente ejemplo:
{"success":true,"data":[{"id":"1","first":"Luiz","last":"Ortega","email":"luiz@gmail.com","age":"19","phone":"123 - 456 - 7893","country":"Mexico"},{"id":"2","first":"Sasha","last":"Cohen","email":"sasha@gmail.com","age":"25","phone":"123 - 456 - 7892","country":"USA"},{"id":"3","first":"Cristiano","last":"Ronaldo","email":"cr@gmail.com","age":"24","phone":"123 - 456 - 7891","country":"Portugal"},{"id":"4","first":"John","last":"Smith","email":"john@hotmail.com","age":"21","phone":"123 - 456 - 7894","country":"USA"}]}
Esto es suficiente para poder generar la interface del Grid mediante JavaScript ya que tenemos toda la información necesaria.

Empaquetando el Tutorial

Vamos a empaquetar el código para evitar conflictos con otras variables o librerías. Esto es algo muy importante y siempre lo debemos realizar.
Ext.ns("com.quizzpot.tutorials");

com.quizzpot.tutorials.CrudForm = {
	init : function() {
		//code
	}
}
Ext.onReady(com.quizzpot.tutorials.CrudForm.init,com.quizzpot.tutorials.CrudForm);
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 CRUD

Lo que haremos a continuación es solicitar la información al servidor, esto será ya dentro de la función “init” de nuestro archivo “crudexample.js”. Como mencionamos anteriormente usaremos un “writer” que se encargue de hacer las operaciones básicas (leer, escribir, modificar y eliminar). Para logara esto es necesario definir la propiedad “api” con las URLs donde el “proxy” realizara las peticiones Ajax de manera automática.
var proxy = new Ext.data.HttpProxy({  //step 1
	api: {
		read 	: "serverside/getContacts.php",
		create 	: "serverside/createContact.php",
		update	: "serverside/updateContact.php",
		destroy	: "serverside/destroyContact.php"
	}
});
En el paso uno se crea una instancia de “Ext.data.HttpProxy” esto es para que el “store” realice las peticiones Ajax de manera automática. A continuación haremos el “Reader” y el “Writer”:
var reader = new Ext.data.JsonReader({  //step 1
	totalProperty	: 'total',
	successProperty	: 'success',   // indica la propiedad que define si se ha insertado/actualizado o borrado con éxito
	messageProperty	: 'message',
	idProperty	: 'id',
	root		: 'data'   //este es el nombre del parámetro que llega al servidor con el JSON modificado
},[
	{name: 'first'},
	{name: 'last'},
	{name: 'email'}
]);
			
var writer = new Ext.data.JsonWriter({  //step 2
	encode		: true,
	writeAllFields	: true  //decide si se manda al servidor solamente los campos modificados o todo
})

this.store = new Ext.data.Store({
	proxy		: proxy,
	reader		: reader,
	writer		: writer,
	autoSave	: true
});
this.store.load();
En el paso uno lo que hacemos es crear una instancia del “JsonReader” este componente nos permitirá leer e interpretar la respuesta del servidor para cada petición Ajax realizada. En el paso tres se crea la instancia del “JsonWriter”. Los tres fragmentos de código anteriores ya los hemos visto a detalle en tutoriales pasados, esa es la razón por la que no entramos a detalles de estructura solo hacemos mención algunos atributos. Si esto es nuevo para ti, te recomendamos revisar el tema sobre esto.//link a lo onda del CRUD :D

Creado el Grid

A continuación crearemos el Grid. Lo primero que haremos es desplegar la información que traemos desde la base de datos.
var sm = new Ext.grid.CheckboxSelectionModel(); //step 1

 this.grid = new Ext.grid.GridPanel({  .//step 2
	region		: "center",
	margins		: "3 3 3 3",
	width		: 300,
	store		: this.store, // step 3
	columns		: [
			sm,
			{header:'Name', dataIndex:'first',sortable: true,width:80},
			{header:'Lastname', dataIndex:'last',sortable: true,width:80},
			{header:'E-mail', dataIndex:'email',sortable: true,width:100}
			],
tbar		: [   //step  4
			{text:"Delete", scope:this, handler:this.onDelete,iconCls:'delete-icon'}
			],	
 	sm		: sm,
	border		: false,
	stripeRows	: true
});
En el paso uno creamos una instancia del componente “CheckboxSelectionModel” para hacer que el selectionModel funcine mediante un checkbox. En el paso dos se crea la instancia del GridPanel para formar la tabla que contendrá la información recibida de la base de datos. Notemos que esta tabla cuenta con el dos atributos especiales “region” y “margins” el primero es para poder colocar nuestra tabla en una ventana que use un layout de tipo “border”. Por esta razón nuestro tabla tiene este atributo el cual nos dice que queremos que la tabla esté en el centro de la ventana. El segundo solo crea un margen alrededor del componente a la distancia en pixeles que le especificamos. En el paso tres se le pasa a la tabla el “store” que contiene la información a desplegar en el grid. En el paso cuatro se está agregando el botón “eliminar” en la barra de herramientas. Notemos que al botón se le está agregando una imagen para esto es necesario definir la case CSS (delete-icon) en nuestra hoja de estilos o documento HTML de la siguiente manera:
.delete-icon{background:transparent url(icons/delete.png) 0 0 no-repeat !important;}
Por el momento no trabajaremos con la función que está en el botón ya que lo haremos un poco más adelante así que puedes comentar el atributo “handler”. Por último colocaremos nuestra tabla en una ventana para poder mostrar los registros de esta.
var win = new Ext.Window({
	title	: "Grid and Form Example",
	layout	: "border",
	width	: 600,
	height	: 400,
	items	: [this.grid]
});
win.show(); 
Este es código ya muy común para nosotros. Solo mencionaremos algo relacionado con lo anterior, si notamos esta ventana tiene un layout de tipo “border” esto con el fin de acomodar los componentes en regiones. Por el momento solo contamos con nuestra tabla. En estos momentos tendríamos algo semejante a esto:
colocando el grid

Colocando el Grid

Creado el Formulario

En la sección pasada creamos la tabla que muestra la información de la base de datos, ahora haremos el formulario para introducir y editar la información. Lo primero que haremos es crear el formulario.
this.form = new Ext.form.FormPanel({
	region		: "west",
	width		: 250,
	bodyStyle	: "padding: 10px;",
	url		: "serverside/updateContact.php", //step 1
	margins		: "3 3 3 3",
	border		: false,
	defaults		: {allowBlank: false},
	items		: [  //sptep 2
			{xtype : "textfield", name : "first", fieldLabel : "Name"},
			{xtype : "textfield", name : "last", fieldLabel : "Lastname"},
			{xtype : "textfield", name : "email", fieldLabel : "E-mail", vtype :"email"},
			{xtype : "textfield", name : "age", fieldLabel : "Age"},
			{xtype : "textfield", name : "phone", fieldLabel : "Phone"},
			{xtype : "textfield", name : "country", fieldLabel : "Contry"},
			{xtype : "textfield", name : "id",hidden:true,allowBlank:true}
			],			],
	fbar		: [{text : "Update", scope : this, handler: this.onUpdate},  //step 3
			   {text : "Create", scope : this, handler: this.addContact}],
});
Lo primero que hacemos es crear la instancia del FormPanel. Si notamos nuestro formulario cuenta con los atributos “region” y “margins” del mismo modo que en la sección anterior nuestra tabla. El tributo región coloca el formulario en la posición “oeste” y “margins” crea un margen alrededor del formulario. En el paso uno específicas con el atributo “url” el archivo que manejara el evento “submit” del formulario, esto lo veremos un poco más adelante. En el paso dos tenemos los campos que formarán el formulario, en general todos los “textfields” solo cuentan con un “nombre” y su “etiqueta”. Notemos el caso de el campo que recibe el correo electrónico que introduce el usuario, este cuenta con un “vtype” de tipo “email” esto es con el fin de validar que el usuario ingrese una dirección de correo electrónico válida al un cambio o crear un nuevo contacto. El campo de nombre “id” también es un caso especial, si notamos este campo está oculto ya que lo definimos así por medio del atributo “hidden”, este campo se puede quedar en blanco. El por qué de esto lo explicaremos más adelante. En el paso tres se crean los botones “actualizar” y “crear”. Por el momento no trabajaremos con las funciones que están en los botones ya que lo haremos un poco más adelante así que puedes comentar el atributo “handler”. Ya que tenemos el formulario listo lo siguiente es agregarlo a la venta, para poder mostrarlo.
var win = new Ext.Window({
	title	: "Grid and Form Example",
	layout	: "border",
	width	: 600,
	height	: 400,
	items	: [this.grid,this.form] //step 1
});
win.show(); 
En el paso uno solo agregamos el formulario a la ventana por medio del atributo “items”, en este momento deberíamos tener algo como la siguiente imagen:
colocando el formulario

Colocando el Formulario

Grabar los Registros Modificados

Hasta este punto tenemos la información en nuestro “Grid” lo siguiente que tenemos que hacer para poder cumplir una de las funciones del CRUD es editar los registros del “Grid” y guardarlos en la base de datos. Para esto tenemos que sacar la información del Grid y desplegarlo en el formulario. Lo primero que haremos es desplegar la información del Grid en el formulario, con la información ya en el formulario la podremos editar y guardar en la base de datos. Lo primero que haremos es obtener la información del contacto, esto lo haremos de la siguiente manera: this.grid.on("rowClick",this.loadRecord,this); Agregamos el evento “rowClick”, este evento se dispara cuando se da clic sobre un registro de la tabla, notemos que este evento es manejado por la función “loadRecord” es importante mencionar que también se le pasa el scope donde se ejecutará la función. La función loadRecord lo que hace es hacer una petición al servidor con el “id” del contacto para traer la información de este y desplegarla en el formulario, esta función la veremos a continuación:
loadRecord : function(Grid,index,ev){  //step 1
	var rec = this.grid.store.getAt(index);  //step 2

	this.form.getForm().load({  //step 3
		url	: "serverside/fillForm.php", //archivo php que se encargará de hacer la petición al servidor
		params	: {record:rec.id},  //step 4
		failure	: function(form, action){
		Ext.Msg.alert("Error","Load failed");
		}
});
},
En el paso uno se crea la función recibiendo los parámetros que nos manda el evento “rowClick”. En el paso dos usamos el parámetro “index” el cual nos marca la fila en la que se encuentra el registro sobre el cual se dio clic. Esto lo hacemos con el fin de obtener la información de ese registro para poder cargarla en el formulario. En el paso tres usamos el método “load” para cargar hacer la petición Ajax y desplegar el resultado en el formulario. En el paso cuatro como parámetro de la petición mandamos el “id” del registro el cual obtuvimos en el paso uno. Con esto es suficiente para hacer la petición al servidor, lo que sigue es crear el archivo PHP (serverside/fillForm.php) que es el que se comunicará con la base de datos.
<?php	//step 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());

	$id = $_POST["record"];
	//step 2
	$query = sprintf("SELECT * FROM contacts WHERE id =%d",
			mysql_real_escape_string($id));
			
	$result = mysql_query($query);
	
	$info=array();
	//step 3
	if($row = mysql_fetch_array($result)){
		$info = array(
			"id"	=> $row["id"],
			"first"	=> $row["firstName"], 
			"last"	=> $row["lastName"], 
			"email"	=> $row["email"],	
			"age"	=> $row["age"],
			"phone"	=> $row["phone"],
			"country"=> $row["country"]
		);
	}
	//step 4
	echo json_encode(array(
		"success" => true,
		"data"	=> $info
	));
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, al recibir la información que se manda en el evento “load” del formulario, hacemos el query que regresa todo lo que contiene el registro con ese “id”, es un query muy sencillo. En el paso tres se itera el resultset que regresó la consulta, dentro del ciclo creamos un arreglo con la información del contacto. En el paso cuatro se imprime la información en formato JSON, la respuesta será como el siguiente ejemplo:
{"success":true,"data":{"id":"2","first":"Sasha","last":"Cohen","email":"sasha@gmail.com","age":"25","phone":"123 - 456 - 7892","country":"USA"}}
Con esto cuando demos clic sobre un registro de la tabla la información de ese contacto será cargada automáticamente en el formulario. Y deberíamos tener algo como la siguiente imagen:
llenando el formulario

Llenando el Formulario

Ahora sí, la información está lista para poder ser editada, lo que debemos hacer ahora es guardar esa información. Para esto usaremos la función (onUpdate) que fue asignada al botón “actualizar”, esta función nos ayudará a realizar lo antes mencionado.
onUpdate : function(){
	if (this.form.getForm().isValid()){ //step 1
		this.form.getForm().submit({  //step 2
			scope	: this,
			success	: function(){
				this.store.load()},
			failure	: function(response){
				console.debug(response);
			}
		});
	}else{
		Ext.Msg.alert("Error","All fieds are requiered");
	}		
},
En el paso uno verificamos que no se encuentre ningún campo vacío del formulario, de lo contrario se manda un mensaje de error. En el paso dos se hace un “submit” al formulario, con el atributo “scope” indicamos el contexto donde se ejecutarán las funciones definidas en “success” y “failure”. En la función definida para “success” lo único que hacemos es cargar el store con el propósito de actualizar la tabla con los cambios realizados a la información del contacto. En la función “failure” solo se imprime en consola la información para ver donde se originó el problema. Lo que debemos hacer ahora es crear el script PHP que va a actualizar la información en la base de datos, si recordamos en el formulario en el atributo “url” tenemos el archivo “serverside/updateContact.php”, este archivo se encarga de actualizar la base de datos.
<?php	//step 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	= htmlentities($_POST["first"], ENT_QUOTES);
	$last	= htmlentities($_POST["last"], ENT_QUOTES);
	$mail	= htmlentities($_POST["email"], ENT_QUOTES);
	$age	= htmlentities($_POST["age"], ENT_QUOTES);
	$phone	= htmlentities($_POST["phone"], ENT_QUOTES);
	$country	= htmlentities($_POST["country"], ENT_QUOTES);
	$id	= $_POST["id"];
	
	//step 3
	$query = sprintf("UPDATE  contacts SET email = '%s', firstName = '%s', lastName = '%s', age = '%s' ,phone = '%s', country = '%s' WHERE id=%d",
		mysql_real_escape_string($mail),
		mysql_real_escape_string($name),
		mysql_real_escape_string($last),
		mysql_real_escape_string($age),
		mysql_real_escape_string($phone),
		mysql_real_escape_string($country),
		mysql_real_escape_string($id));

	$rs  = mysql_query($query);
	
	//step 4
	echo json_encode(array(
		"success" 	=> mysql_errno() == 0,
		"msg"		=> mysql_errno() == 0?"Contact inserted successfully":mysql_error()
	));
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 lo que hacemos es obtener la información mandada por el submit, notemos que la información está siendo pasada por la función PHP “htmlentities” que elimina las etiquetas html en la información que fue introducida. Lo que esta función hacer es convertir la siguiente etiqueta html <b>Luiz</b> a algo como lo siguiente <b>Luiz</b> En el paso tres hacemos un “update” a la tabla en la que están guardados nuestros contactos y le damos como valores la información que fue mandada por el “Store”. En el paso cuatro lo que hacemos es mandar un mensaje de éxito si es que todo sale bien, de lo contrario se manda el mensaje de error de MySQL. Hasta este momento ya cumplimos con dos de las cuatro funciones de un CRUD leer y actualizar.

Crear un Registro Nuevo

En la sección anterior logramos guardar los registros que fueron modificados por el usuario, ahora vamos a insertar nuevos registros en el Grid, para esto usaremos la función (addContact) que fue asignada al botón “crear” esta función nos ayudara a realizar lo antes mencionado.
addContact : function(){	
	if (this.form.getForm().isValid()){  //step 1
		var contact = new this.store.recordType({  //step 2
			first	: this.form.getForm().getValues().first,
			last	: this.form.getForm().getValues().last,
			email	: this.form.getForm().getValues().email,
			country	: this.form.getForm().getValues().country,
			phone	: this.form.getForm().getValues().phone,
			age	: this.form.getForm().getValues().age
		});
		this.store.insert(0,contact);  //step 3
	}else{
		Ext.Msg.alert("Error","All fields are requiered");
	}
}
Creamos la función dentro del objeto principal y en el paso uno verificamos que no se encuentren campos vacios en el formulario, de lo contrario se manda un mensaje de error. En el paso dos hacemos un registro nuevo asignándole en los campos del Grid la información que el usuario introduce en el formulario para este nuevo registro. En el paso tres insertamos el contacto nuevo para amostrarlo en el Grid, al tener un “Writer” configurado automáticamente se realizará una petición al servidor con la información a grabar. Lo siguiente que debemos hacer es guardar ese contacto nuevo en la base de datos. Para esto necesitamos crear el archivo “serverside/createContact.php”, el cual se encargará de introducir el nuevo registro a la base de datos.
<?php	//step 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());

	$info = $_POST["data"];

	$data = json_decode(stripslashes($info));  //step 2
	
	//step 3
	$name	= htmlentities($data->first, ENT_QUOTES);
	$last	= htmlentities($data->last, ENT_QUOTES);
	$email	= htmlentities($data->email, ENT_QUOTES);
	$age	= htmlentities($data->age,ENT_QUOTES);
	$phone	= htmlentities($data->phone, ENT_QUOTES);
	$country= htmlentities($data->country, ENT_QUOTES);

	//step 4
$query = sprintf("INSERT INTO contacts (email,firstName,lastName,age,phone,country) values ('%s','%s','%s','%s','%s','%s')",
			mysql_real_escape_string($email),
			mysql_real_escape_string($name),
			mysql_real_escape_string($last),
			mysql_real_escape_string($age),
			mysql_real_escape_string($phone),
			mysql_real_escape_string($country));
			
	$rs = mysql_query($query);

	//step 5
	echo json_encode(array(
		"success" 	=> mysql_errno() == 0,
		"msg"		=> mysql_errno() == 0?"Contact inserted successfully":mysql_error(),
		"data"		=> array(
			array(
				"id"	=> mysql_insert_id(),
				"first"	=> $name,
				"last"	=> $last,
				"email"	=> $email,
				"age"	=> $age,
				"phone"	=> $phone,
				"country"=>$country
			)
		)
	));
En el paso uno se realiza la conexión a la base de datos. En el paso dos, una vez que recibimos la información que mando el “Store” lo decodificamos con la función json_decode() de PHP con esto ya podemos acceder a la información que fue editada en el formulario, la función “stripslashes” elimina el carácter “\” que Apache le agrega, es posible que la configuración de tu servidor no lo haga, pero es bueno prevenir esto para evitarnos errores en el futuro. En el paso tres revisamos que la información que recibimos del formulario no tenga etiquetas HTML con la función php htmlentities(). En el paso cuatro hacemos un “insert” y damos como valores la información que fue mandada por el formulario. En el paso cinco lo que hacemos es mandar un mensaje de éxito si es que todo sale bien, de lo contrario se manda el mensaje de error de MySQL. Es muy importante mencionar que el Json_encode se está haciendo después del “success” y el “msg” mandamos la información que fue insertada a la base de datos, es muy importante mandar el “id” del nuevo registro, esto nos permitirá que los métodos update y delete funcionen correctamente, si no lo hacemos no funcionarán. Con esto ya podremos insertar un nuevo registro en nuestro “Grid” y en nuestra base de datos.

Eliminando un Registro

En estos momentos solo hemos hecho lo necesario para poder leer los registros y desplegarlos en nuestro “Grid”, podemos añadir nuevo registros y editar los registros existentes por medio de nuestro formulario. Lo único que nos hace falta es eliminar registros y con esto tendríamos las cuatro funciones del CRUD. Para esto crearemos la función a la que hace referencia el botón “eliminar”, lo que haremos es lo siguiente:
onDelete : function(){  //step 1
	var rows = this.grid.getSelectionModel().getSelections();  //step 2
	if(rows.length === 0){  //step 3
		return false;
	}
	this.store.remove(rows);  //step 4
},
En el paso uno creamos la función “onDelete” dentro del objeto principal. En el paso dos tomamos la instancia del “SelectionModel()” de nuestro “Grid”, con esto podemos obtener la información de las filas seleccionadas por el usuario mediante el método “getSelections()”. En el paso tres lo que hacemos es verificar que el usuario haya seleccionado algo, si no hay nada seleccionado o la selección del “Grid” está vacía no se eliminará ningún registro ya que hacemos un return. En el paso cuatro ya que se verificó que es un registro que puede ser borrado y lo eliminamos del “Grid” usando el método “remove” del store que contiene los records. Lo siguiente que debemos hacer es crear el archivo(serverside/destroyContact.php”) que se encargará de borrar el registro de la base de datos.
<?php	//step 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());

	$id = json_decode(stripslashes($_POST["data"])); //step 2

	//step 3
	$query = sprintf("DELETE FROM contacts WHERE id = %d",
		mysql_real_escape_string($id));

	$rs  = mysql_query($query);

	//step 4
	echo json_encode(array(
		"success" 	=> mysql_errno() == 0,
		"msg"		=> mysql_errno() == 0?"Contact deleted successfully":mysql_error()
	));
En el paso uno lo que hacemos es crear la conexión a la base de datos. En el paso dos obtenemos la información que nos fue mandada, la decodificamos con Json_decode() y la guardamos en la variable “id”. En este caso solo se nos envió el “id” del registro que se quiere eliminar. En el paso tres solo hacemos el query para eliminar el registro. En el paso cuatro mandamos como respuesta un mensaje de éxito y si ocurrió un error se manda el error como respuesta. Si intentamos eliminar un registro notaremos que esta vez también fue borrado de nuestra base de datos. Esta sería la respuesta del servidor:
{"success":true,"msg":"Contact deleted successfully"}  
Con esto terminamos la última parte de nuestro CRUD que es eliminar un registro.

Conclusión

En esta ocasión vimos como podemos integrar un formulario y una tabla para poder realizar algunos cambios a la información que esta contiene, con esto podemos crear una nueva aplicación de una manera más dinámica. 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!

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.

¿Olvidaste tu contraseña?

23Comentarios

  • Avatar-11 jaime 11/11/2010

    Muy interesante, muchas gracias por este ejemplo

    • Avatar-4 Hector 11/11/2010

      Y como puedo hacerlo local, es decir quiero que no se guarde en un base de datos sino en un array y dos como hacer una sumatoria de un campo.

      • Avatar-3 Lord Tinchen 12/11/2010

        Muy buen ejemplo!

        • Avatar-7 Cesar 16/11/2010

          Hay un problema cuando creas un registro y luego ah ese mismo quieres modificarlo en ese mismo instante no lo puede hacer porque no tiene el id para ese.

          • Avatar-11 Pedro Luna 16/11/2010

            Víctor: He bajado Integración del FormPanel y el GridPanel. Seguí las instrucciones, cree la BD y la tabla. Al ejecutar gecontact.php me sale:{"success":true,"data":[{"id":"1","first":"Luiz","last":"Ortega","email":"luiz@gmail.com","age":"19","phone":"123 - 456 - 7893","country":"Mexico.... Por lo que veo hay algo que no funciona. Con el tutorial de agregar, modificar, borrar etc Crud no tuve problemas. Que estoy haciendo mal? Gracias Pedro de Uruguay

            • Avatar-5 Victor Felipe 18/11/2010

              Eso es verdad... lo que te recomiendo es "limpiar" el formulario una vez que el registro fue creado, esto con el fin de evitar ese tipo de confusiones al usuario. Esto lo haremos en la función "addContact" después de que se inserta el registro al Grid un simple this.form.getForm().reset(); y listo. De este modo para editar un registro se tiene que cargar en el formulario ya con su id. Seria bueno hacer lo mismo en la función "onDelete" después de que el registro es eliminado del "store".

              • Avatar-1 Victor Felipe 18/11/2010

                Específicamente que es lo que no te funciona, no se si puedes poner algo de información sobre el "error" que te marca...

                • Avatar-12 dimmi 24/11/2010

                  Hola Victor, tengo un problema ... porque cuando paso el id del registro por medio del params para llenar el formulario manda este valor "ext-record-2" , cuando ejecuto el query me manda error porque espera un entero que es el 2. gracias

                  • Avatar-11 dimmi 24/11/2010

                    ya esta Victor, no estaba pasando el id dentro del arreglo en el archivo php ... por otro lado, es forzoso que el id sea numerico? no podria pasar un campo varchar aun cuando en mi tabla es un indice unico? gracias ...

                    • Avatar-12 Adaías 25/11/2010

                      Oye Felipe solo por curiosidad, tal vez no haya entendido bien, pero en el update tengo la impresion de que en realidad se está realizando atravez del url del form y no por medio de la propiedad api del HttpProxy. De igual forma no tiene mucha importancia. Chido tutorial (y).

                      • Avatar-8 Pedro 02/12/2010

                        Victor: Gracias por responder. No me funciona en el IE 7. Lo curioso es que la demo si. Gracias Pedro

                        • Avatar-4 Luis Guillen 08/12/2010

                          Hola muy buenas tardes, agradezco el tiempo que tienen para publicar estos enormes apoyos para los que estamos aprendiendo, solo tengo una duda, como refrescar el gridpanel? lo que pasa es que lo integre a una BD que tengo, pero en esa BD tengo un campos configurado como UNICO, es decir no pueden haber dos de ellos, el problema que tengo es que cuando el usuario duplica el campo se estropea y ya no guarda nada, tengo que refrescar la pagina para que vuelva a guardar. gracias..

                          • Avatar-11 Luis Cevallos 01/03/2011

                            Saludos Cordiales. Muy buen tutotial he tratado de hacer algo parecido a lo que haces en este ejemplo pero quiero mostrar un alert cuando se crea un usuario me devuelve los datos en forma de json y tengo el msg que tiene el mismo pero no se como hacer para que se muestre ese mensaje cuando se presione el boton guardar ya he intentado muchas cosas hasta un evento con el HttpProxy le puse un listener load para atrapar esos datos pero nada no se como hacerlo por fa tu ayuda con este tema como tu harias esto con metodologia crud por que veo que tu haces un insert en tu store pero ademas de eso quiero mostrar el mensaje de que se agrego el cliente con su id o el mensaje de error sino se pudo ejecutar la accion por fa te agradeceria mucho si logras ayudarme. Gracias.

                            • Avatar-6 Yotuel 06/04/2011

                              Hola, quisiera saber si tienes solución a lo que planteastes. Tengo la misma duda, preciso controlar lo que se hace cuando se elimina, se actualiza o se inserta; o sea, quiero preguntar ¿Está seguro que desea ...? y en dependencia de la respuesta (Sí/No) proceder a cancelar o continuar. También quiero poner mensajes de información (Ext.Msg.alert(...) para cada opearción una vez ejecutada. Gracias de antemano.

                              • Avatar-8 Liuver Durán 14/04/2011

                                Hola, estoy usando la versión de Ext 3.3. Sin embargo, cuando pruebo este ejemplo, no funciona ninguno de los botones implementados. Tiene que ver eso con la versión? Todas la interfaz gráfica se muestra perfectamente, pero me parece que los eventos son los que no se ejecutan. Saludos y gracias de antemano.

                                • Avatar-1 Giovanni 28/04/2011

                                  Hola Felipe, Pues lo mismo me pasa a mi, al comentariar la url de form no realiza la actualización y no se como hacer par que lo realice mediante la api del HttpProxy. Aprovecho para agradecer estos magnificos tutoriales...

                                  • Avatar-2 Luis 11/08/2011

                                    Que tal, saludos y gracias por los tutos. Sin embargo tengo un problema, estoy desarrollando una aplicacion con funciones similares, solo que en este caso solamente realizo una consulta, pero el problema es que no puedo actualizar el grid que contiene los datos. Espero puedas ayudarme por favor saludos y gracias por tu atencion....

                                    • Avatar-10 Uri Nathan 23/11/2011

                                      hola q tal primero felicitarte por el tutorial esta muy bueno, quisiera pedirte una ayuda, aplique el mismo tutorial con otra base de datos y usando textfield me funciono de maravilla, pero como tengo dos atributos el cual es una fecha y el otro es un id modifique dos textfield por un datefield y un combo respectivamente, para insertar me funciona bien el datefield, pero el combo me da de resultado 0, ojo que en el momento de declarar el combo si declare bien el valuefield y el displayfield, y al momento de modificar no me recupera ni el combo ni la fecha los demas campos si, me podrias ayudar o dar alguna solucion, gracias de antemano aca pongo el codigo: Mantenedor = { init : function() { var cbo_Tipo = new Ext.data.ArrayStore({ fields: ['id','gnr'], data: [['1','ACEITES'],['2','VERDURAS'],['3','CARNES']] }); //CRUD var proxy = new Ext.data.HttpProxy({ api: { read : "serverside/getContacts.php", create : "serverside/createContact.php", update : "serverside/updateContact.php", destroy : "serverside/destroyContact.php" } }); var reader = new Ext.data.JsonReader({ totalProperty : 'total', successProperty : 'success', messageProperty : 'message', idProperty : 'id', root : 'data' },[ {name: 'Nombre', type: 'string', mapping: 'Nombre'}, {name: 'Tipo', type: 'string', mapping: 'Tipo'}, {name: 'Cantidad', type: 'integer', mapping: 'Cantidad'}, {name: 'Fecha', type: 'datetime', dateFormat: 'Y-m-d', mapping: 'Fecha'} ]); var writer = new Ext.data.JsonWriter({ encode : true, writeAllFields : true }); this.store = new Ext.data.Store({ id : "id", proxy : proxy, reader : reader, writer : writer, autoSave : true }); this.store.load(); //form this.form = new Ext.form.FormPanel({ region : "west", width : 350, bodyStyle : "padding: 10px;", url : "serverside/updateContact.php", margins : "3 3 3 3", border : false, defaults : {allowBlank: false}, items : [ {xtype : 'textfield', name : 'Nombre', fieldLabel : 'Nombre'}, { xtype:'combo', fieldLabel:'Tipo', name:'Tipo', triggerAction:'all', displayField: 'gnr', valueField: 'id', mode: 'local', store:cbo_Tipo // xtype : 'textfield', // name : 'Tipo', // fieldLabel : 'Tipo' }, { xtype: 'numberfield', fieldLabel: 'Cantidad', name: 'Cantidad' }, { xtype: 'datefield', fieldLabel: 'Fecha Ingreso', name: 'Fecha', format: 'Y-m-d' //renderer: Ext.util.Format.dateRenderer('d-m-Y') }, {xtype : "textfield", name : "id",hidden:true,allowBlank:true} ], fbar : [{text : "Modificar", scope : this, handler: this.onUpdate}, {text : "Guardar", scope : this, handler: this.addContact}, {text : "Nuevo", scope : this, handler: function() { form.getForm().reset(); } } ] }); //Grid var sm = new Ext.grid.CheckboxSelectionModel(); this.grid = new Ext.grid.GridPanel({ region : "center", margins : "3 3 3 3", width : 300, store : this.store, columns : [ sm, {header:'Nombre', dataIndex:'Nombre',sortable: true,width:80}, {header:'Tipo', dataIndex:'Tipo',sortable: true,width:30}, {header:'Cantidad', dataIndex:'Cantidad',sortable: true,width:40}, {header:'Fecha', dataIndex:'Fecha',sortable: true,width:150} ], sm : sm, tbar : [ {text:"Eliminar", scope:this, handler:this.onDelete,iconCls:'delete-icon'} ], border : false, stripeRows : true }); var win = new Ext.Window({ title : "Mantenedor Producto", layout : "border", width : 900, height : 400, items : [this.grid, this.form] }); win.show(); this.grid.on("rowClick",this.loadRecord,this); }, loadRecord : function(Grid,index,ev){ var rec = this.grid.store.getAt(index); this.form.getForm().load({ url : "serverside/fillForm.php", params : {record:rec.id}, failure : function(form, action){ Ext.Msg.alert("Error","Load failed"); } }); }, onUpdate : function(){ if (this.form.getForm().isValid()){ this.form.getForm().submit({ scope : this, success : function(){ this.store.load()}, failure : function(response){ console.debug(response); } }); }else{ Ext.Msg.alert("Error","All fieds are requiered"); } }, onDelete : function(){ var rows = this.grid.getSelectionModel().getSelections(); if(rows.length === 0){ return false; } this.store.remove(rows); this.form.getForm().reset(); }, addContact : function(){ if (this.form.getForm().isValid()){ var producto = new this.store.recordType({ Nombre : this.form.getForm().getValues().Nombre, Tipo : this.form.getForm().getValues().Tipo, Cantidad : this.form.getForm().getValues().Cantidad, Fecha : this.form.getForm().getValues().Fecha, }); this.store.insert(0,producto); this.form.getForm().reset(); }else{ Ext.Msg.alert("Error","All fields are requiered"); } } } Ext.onReady(Mantenedor.init,Mantenedor);

                                      • Avatar-12 William E Velandia 10/09/2012

                                        Excelentes tutoriales, precisamente sobre este tutorial y en vista de que estoy realizando un proyecto quiero saber si alguien tiene un ejemplo o uds. pueden realizar un tutorial que es lo contrario a este tutorial es decir primero selecciono mis registros de la grilla y luego tengo un formulario con unos campos diferentes a los de la grilla y la relaciòn que tengo que hacer es almacenar en una tabla las filas seleccionadas de la grilla adicionando los datos del formulario, algo asì como un Maestro Detalle. La manera como lo estoy haciendo es almacenar en un array los registros que selecciono de la grilla y en otras variables los valores del form porque no he visto otra solución más adecuada. Agradezco a uds. su colaboraciòn.

                                        • Avatar-9 Anthonio 30/03/2013

                                          hola una consulta, como hago para que funcione este ejemplo con el Ext.onReady(function(){ codigo }); y no con el Ext.ns("com.quizzpot.tutorials"); com.quizzpot.tutorials.CrudForm = { init : function() { //code } } Ext.onReady(com.quizzpot.tutorials.CrudForm.init,com.quizzpot.tutorials.CrudForm); ....gracias de antemono por la ayuda

                                          • Avatar-9 luis ernesto cantin oviedo 09/05/2013

                                            Hola amigos muy buenos días la cual tengo una inquietud si alguien me podría colabora con respecto a este tema: tengo un GridPanel la cual tiene una columna de tipo la cual en el código C# no se como sacar el valor del ultimo registro. agredeceria antemano por la solucion a este problemade programacion

                                            • Avatar-3 luis ernesto cantin oviedo 09/05/2013

                                              el GrigPanel tiene una columna de este tipo de datos RowNumbererColumn y no se como hacer para sacar el ultimo valor de RowNumbererColumn les agradecesria

                                              • Avatar-11 Juan Veliz 26/08/2015

                                                Como puedo descargar estos código sin problema

                                                Instructor del curso

                                                Crysfel3

                                                Autor: Crysfel Villa

                                                Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                                Descarga Código Fuente Ver Demostración

                                                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.