ExtJS4: Formularios basicos

En esta nueva versión (beta por el momento) de este framework, se dieron numerosos cambios en los temas de layouts y datos. Pero afortunadamente, la metodología de trabajo utilizada en versiones anteriores sigue siendo válida.

Resultado final

En su versión más básica, podemos concebir el formulario como una simple agrupación de campos bajo un componente padre que brinda ciertas caracteristicas adicionales. A fines de simplificar el ejemplo, al formulario en cuestión lo vamos a renderizar directamente sobre un elemento DOM existente en el html.En primer lugar vamos a definir los campos en un array. La definición individual de campos se puede realizar mediante instancias de los componentes a utilizar (textfield por ejemplo), o una definición plana (object) que representan un componente lazy (mediante la cual se genera la instancia una vez que sea requerida, ahorrando la memoria hasta entonces).

// Definimos una lista de campos
var campos = [
	// Esta es una definicion lazy, en la cual tipificamos el
	// campo mediante el atributo xtype
	{
		// Tipo de campo
		xtype: 'textfield',
		// Label del campo
		fieldLabel: 'Nombre',
		// nombre que se utilizara en el post del save
		name: 'nombre',
		// campo requerido
		allowBlank:false
	},
	// Esta es una definicion mediante instancia formal del
	// componente, en la cual podemos obviar el xtype
	new Ext.form.TextField({
		fieldLabel: 'Ocupacion',
		name: 'ocupacion'
	}),
	{
		xtype: 'textfield',
		fieldLabel: 'Email',
		name: 'email',
		// Indica el tipo de validacion que recibira
		vtype:'email',
		allowBlank:false
	}
];

Como se puede observar, la definición de campos se puede hacer de forma explícita (instancias de un componentes) o implícitas (definición del componente). Idealmente, se deberían utilizar las definiciones lazy siempre que se pueda, ya que implican un menor consumo de recursos hasta su utilización.

Posteriormente realizamos la instanciación del formulario:

// Instanciamos el formulario
var formBasico = new Ext.form.FormPanel({
	url:'response.json',
	border: false,
	width: 350,

	// Atributos por defecto para los campos,
	// en caso de que se definan dentro del campo
	// generan un override de estos defaults
	fieldDefaults: {
		msgTarget: 'side',
		labelWidth: 75,
		anchor: '100%'
	},		

	// asignamos los campos que creamos al formulario
	items: campos,

	// Creamos los botones
	buttons: [
		{
			text: 'Guardar',
			handler: function() {
				var form = this.up('form').getForm();

				form.submit({
					success: function(form, action) {
						// logica puntual
					},
					failure: function(form, action) {
						// logica puntual
					}
				});
			}
		},
		{
			text: 'Saludar',
			handler: function() {
				var nombre = this.up('form').getForm()
							.getFields().get(0).getValue();
				alert('Hola ' + nombre);
			}
		}
	],
	// elemento en el cual va a renderizarse
	renderTo: 'placeholder'
});

Con esto, tenemos el formulario renderizado, con los campos definidos con las validaciones correspondientes a su xtype y vtype. Este ejemplo completo puede descargarse de este link.

Leer más:


Shortlink: http://goo.gl/WQ4WA



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comment

You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>