Layout Básico y Validaciones con ExtNet

Esta es la segunda parte sobre ExtNet, la primera la pueden encontrar aquí, hoy veremos como crear un layout basico o la disposicion de los controles dentro de la pagina, y como incluir validaciones.

Comenzaremos creando un nuevo proyecto web vacio y escribiendo las configuraciones necesarias para poder incluir los controles de Ext.Net dentro de nuestras páginas, pueden revisar el post anterior o continuar con el siguiente código base.

Lo que queremos lograr es lo siguiente:

En el post anterior ya creamos una ventana (control Window), ahora le añadiremos un conjunto de TextFields y NumberFields y dos clásicos botones, Aceptar y Cancelar.

El esquema básico que se muestra en la figura anterior muestra que tenemos un control tipo Window, dentro de el un FormPanel el cual contiene una colección de controles llamada Items, los botones se los agrupará bajo otra colección llamada Buttons

Dentro de Items colocaremos 2 controles TextField para el nombre del estudiante y su correo electrónico y 2 controles NumberField para el número de carné y su edad.

<ext:NumberField ID="numeroCarne" runat="server" EmptyText="00000" FieldLabel="Número de Carné" AllowBlank="false">
</ext:NumberField>
<ext:TextField ID="nombre" runat="server" EmptyText="Escriba el nombre del estudiante" FieldLabel="Nombres" Width="300" AllowBlank="false">
</ext:TextField>
<ext:TextField ID="correoElectronico" runat="server" EmptyText="Escriba la dirección de correo electrónico"
      FieldLabel="Email" Width="300" AllowBlank="false" 
      Regex="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$">
</ext:TextField>
<ext:NumberField ID="edad" runat="server" EmptyText="19" FieldLabel="Edad" AllowBlank="false">
</ext:NumberField>

Dentro de Buttons colocaremos 2 botones,  Aceptar y Cancelar.

<ext:Button ID="guardar" runat="server" Icon="Disk" Text="Guardar">
	<Listeners>
		<Click Handler="if(#{datosEstudiante}.getForm().isValid()) Ext.Msg.alert('Confirmación', 
        	'Datos guardados con éxito'); else Ext.Msg.alert('Error', 'Revise los datos del formulario');" />
	</Listeners>
</ext:Button>
<ext:Button ID="cancelar" runat="server" Icon="Cancel" Text="Cancelar">
	<Listeners>
		<Click Handler="#{datosEstudiante}.close()" />
	</Listeners>
</ext:Button>

Los controles de Ext.Net poseen la propiedad FieldLabel, esta sirve para establecer el texto de la etiqueta que acompaña al control, solo se visualizará cuando los controles se encuentren dentro de un FormPanel.

Existen varios tipos de validaciones en este caso se ha utilizado las siguientes:

1. AllowBlank, estableciendo su valor en falso, indica que se requiere ingresar un valor en el control.
2. Regex, el texto ingresado es validado mediante una expresión regular.

También hubiéramos podido establecer una validacion mediente RegEx, para no permitir el ingreso de caracteres no numéricos dentro de los controles número de carné y edad sin embargo al utilizar NumberField ya obtenemos este tipo de validación de la entrada de datos.

En los botones de Aceptar y Cancelar se puede ver que existen declaraciones para el manejo del evento Click, cuando se encuentran dentro de la colección Listeners indican que el manejo de estos eventos se los realizara del lado del cliente, mediante la propiedad Handler vamos a especificar el código Javascript que se ejecutará, en el caso del botón Aceptar se evalúa que el formulario sea valido:

#{datosEstudiante}.getForm().isValid()

para luego presentar un mensaje mediante las funciones de ExtJs, pueden consultar la documentación acerca de MessageBox en http://www.extjs.com/deploy/dev/docs/?class=Ext.MessageBox.

Los controles se marcarán con una línea roja similar a Microsoft Word cuando el control no es valido, además que indicaran un mensaje con el tipo de validación que no esta cumpliendo. En este caso se observa al ubicar el cursor sobre el control nombres se indica que el campo es requerido.

En el evento Click para el botón Cancelar simplemente cerraremos la ventana llamada datosEstudiante.

#{datosEstudiante}.close()

Hemos cubierto la forma de como escribir un layout básico de un formulario y como agregar validaciones para la entrada de datos, en el siguiente post veremos como manejar los eventos del lado del servidor.

Hasta la próxima!.

Links útiles:

• Expresión Regular de Email
• Validacion de formularios 
• Código completo del ejemplo

Advertisement