Formulario en ExtJS

Empezaremos con una pequeña introducción a ExtJS que es un Framework para la construcción de aplicaciones Web basadas en la filososfía RIA. En este primer ejemplo se trabajara la construcción de un pequeño formulario muy básico el cual constara de diferentes tipos de componentes que nos proporciona ExtJS.

Cómo primer paso debemos considerar que el ejemplo pude realizarse desde un HMTL común y corriente, este ejemplo se realiza utilizando lo siguiente:

• Eclipse IDE
• JSP
• Tomcat

Se deben descargar los archivos necesarios del Framework desde aquí.

Cómo primer paso se deben añadir las referencias necesarias para el uso de ExtJS dentro del archivo que servirá como base de la construcción, en este caso es un archivo JSP y las referencias a añadir son las siguientes:

<link rel=”stylesheet” type=”text/css” href=”../resources/css/ext-all.css” />
<script type=”text/javascript” src=”../js/ext-base.js”></script>
<script type=”text/javascript” src=”../js/ext-all.js”></script>
<script type=”text/javascript” src=”../js/pages/formulario.js”></script>

Cómo se puede ver en el código anterior se hace referencia a un archivo llamado formulario.js, este archivo contendrá el código necesario de ExtJS para la construcción del formulario. A continuación se muestra el código necesario para construir un formulario muy sencillo dentro del archivo formulario.js.

var movie_form = new Ext.FormPanel( {
url : ‘movie-form-submit.jsp’, //A donde se enviara la información del formulario
renderTo : Ext.getBody(), // En dónde se visualizará el formulario
frame : true,
title : ‘Movie Information Form’,
width : 250,
items : //Aqui se empezarán a añadir los componentes de nuestro formulario
});

Lo siguiente es ir añadiendo los componentes que contendrá nuestro formulario.

items : [ {
xtype : 'textfield', //Ejemplo de campo de texto
fieldLabel : 'Title',
name : 'title',
allowBlank : false
}, {
xtype : 'textfield',//Ejemplo de campo de texto
fieldLabel : 'Director',
name : 'director',
vtype : 'alpha'
}, {
xtype : 'datefield',//Ejemplo de campo de texto con formato de fecha
fieldLabel : 'Released',
name : 'released',
disabledDays : [ 1, 2, 4, 5 ]
}, {
xtype : ‘radiogroup’,//Ejemplo de conjunto de radiobuttons
columns : 1,
fieldLabel : ‘Filmed In’,
name : ‘filmed_in’,
items : [ {
name : 'filmed_in',
boxLabel : 'Color',
inputValue : 'color'
}, {
name : 'filmed_in',
boxLabel : 'Black & White',
inputValue : 'B&W'
} ]
}, {
xtype : ‘checkbox’,//Ejemplo de un checkbox
fieldLabel : ‘Bad Movie’,
name : ‘bad_movie’
}, {
xtype : ‘combo’,//Ejemplo de uan lista desplegable
hidenName : ‘genre’,
fieldLabel : ‘Genre’,
mode : ‘local’,
store : genres, //De aqui se toman los datos para llenar la lista desplegable
displayField : ‘genre_name’,
valueField : ‘id’,
width : 120
}, {
xtype : ‘textarea’,//Ejemplo de area de texto
name : ‘description’,
hideLabel : true,
height : 100,
anchor : ’100%’
}, {
xtype : ‘htmleditor’,//Ejemplo de un editor con herramientas de edicion
name : ‘descriptor’,
hideLabel : true,
height : 100,
anchor : ’100%’
} ]
});

La lista desplegable necesita como parámetro la lista de datos que desplegara, en nuestro ejemplo será un array de Strings y se construye de la siguiente manera:

var genres = new Ext.data.ArrayStore( {
fields : [ 'id', 'genre_name' ],
data : [ [ '1', 'Comedy' ], [ '2', 'Drama' ], [ '3', 'Action' ] ]
});

Una vez terminado lo anterior y sí los archivos referenciados estan en el lugar correcto nos debe de aparecer lo siguiente:

Bueno hasta aquí el primer ejemplo con ExtJS, se agradecen los comentarios o dudas que puedan ir dejando. El próximo ejemplo será una un grid muy básico.

Leer: ExtJS, Ejemplos ExtJS.

Advertisement