Sistemas de Inscripciones (I).

Seguimos avanzando y esta vez, me he propuesto desarrollar un pequeña aplicación que administre inscripciones, con el fin de afrontar casos reales y empezar a ver que partes pueden resultar difícil a la hora de iniciar con el estudio de este framework, nos tocará doble trabajo, ya que el lenguaje del lado del servidor será php, el cual conozco una mínima parte. Pero bueno , siempre hay que dar un primer paso para empezar a caminar. En esta primera parte mostrare solamente la interface del login (login.js) y posteriormente veremos su funcionalidad en php.

Code snippet - Login.js on Snipplr

Login, esta basado en un FormPanel, el cual esta configurado por default con layout:'form', el cual renderisa correctamente las etiquetas y campos de texto.

En la linea 4 tenemos la instrucción Ext.QuickTips.init(), ésta habilita el uso de los tooltips, y con Ext.form.Field.prototype.msgTarget = 'side' (linea 6), hace que cuando exista un error de validación, se muestre un icono rojo en la parte lateral, en este caso, el campo de texto.

defaultType (linea 9), indica que los items (objetos hijos) posteriores serán de ese tipo (xtype), en este caso serán 'textfield', en link pueden ver todos los xtype disponibles.

En la linea 13 encontramos la sentencia monitorValid:true, esta propiedad activa o desactiva el monitoreo de los botones que han sido configurados (declarados) en el arreglo buttons, siempre y cuando estos a su vez estén configurados con la propiedad formBind:true. El monitoreo consiste en habilitar o deshabilitar los botones según el estado del form, en otras palabras, si el form es valido, se habilitan los botones, y si el form no lo es, se deshabilitan.

De la linea 14 a la 27, tenemos el arreglo de objetos items, en el cual se declaran dos componentes hijos del FormPanel del tipo 'textfield'. En la linea 19 y 23, se configura para que se validen a no dejar vacíos los campos (allowBlank:false), si esto pasara, el monitorValid lo detecta y mostrándose el icono rojo lateral con su tooltip de error correspondiente.

En las lineas 29 al 36, se declara el arreglo de botones, aquí solo hay uno, configurando:

• el monitoreo de este botón (linea 31)
• un icono (linea 33)
• su etiqueta (linea 34)

De las lineas 39 a la 54 se hace la instancia de un objeto de tipo Ext.Window, la cual será la ventana que contendrá el FormPanel previamente creado, la configuración de sus propiedades están muy claras:

• layout: usara el tipo 'fit'.
• width: 317 pixeles de ancho.
• height: 148 pixeles de alto.
• title: titulo de la ventana.
• closeAction:'hide', al cerrar la ventana solo se encenderá, de tal manera que puede ser invocada de nuevo sin instanciarse.
• closable: dibuja el botón de la "x" para poder cerrar la ventana.
• draggable: puesta a false para ser una ventana fija, no flotante.
• border: false, no dibuja su borde.
• defaults: Su comportamiento es parecido al defaultType, todo lo configurado en esta propiedad, será tomado por los componentes hijos declarandos en el arreglo items.
• items: tiene como hijo, el componente llamado panel.

Finalmente en la linea 56 mostramos la ventana.

Probar el ejemplo.