Formularios en ExtJS 3.0

Agosto 21 20095 Comentarios

ExtJS 3.0 es un Framework JavaScript para construir aplicaciones RIA (Rich Intenet Aplications), permite construir páginas e interfaces web 2.0 sorprendentes basados en Ajax. http://extjs.com/.

La instalación es fácil, descargue el programa desde la página oficial: http://extjs.es/ .

Descomprima el archivo que contienen las clases JavaScript del Framework en su carpeta Web, en este caso le puse de nombre “ext”.

Si bien es cierto, en este caso uso páginas JSP, usted puede usar cualquier tipo de tecnología ya sea ASPX, JSP, PHP etc, o inclusive HTML puro.

En este ejemplo se usará NetBeans 6.5 como entorno de desarrollo, una vez que ubique mi framework “ext” en el mismo nivel que mis páginas web, debo agregar las siguientes referencias a cada página web donde desee usar algún componente de ExtJS dentro de nuestro <head>.


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

Probaremos si funciona, añadiendo el siguiente código en nuestro body.


<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.alert('Mensaje', '¡Buenos días Risharp!');});
</script>

Ejecutamos nuestra página:

Ahora agregaremos un botón en nuestro body, con el evento onClick invocaremos a nuestro función JavaScript que definiremos enseguida.


<input type="submit" value="Registrar" onclick="Registro()" />

Agregar un archivo JavaScript, lo llamaremos Formjs.js.

En Formjs.js creamos un método en donde pondremos todo nuestro código, éste método será invocado como mencionamos anteriormente por el evento de nuestro botón.

Formjs.js:


function Registro(){}

Definimos las siguientes variables, noten que instanciamos a la clase “Ext.form” y luego definimos que tipo de componente será.


var NombreBox= new Ext.form.TextField({
fieldLabel: 'Nombres',
emptyText:'Ingrese Nombres',
var ApellidoBox= new Ext.form.TextField({
fieldLabel: 'Apellidos',
emptyText:'Ingrese Apellidos',});

var comboFecha = new Ext.form.ComboBox({
fieldLabel:'Fecha de Ingreso',
name:'year',
triggerAction:'all',
store:[2001,2002,2003,2004,2005,2006,2007,2008],
width: 159</p>
} );
var CheckActividad = new Ext.form.Checkbox(
{
fieldLabel:'',
labelSeparator:'',
boxLabel:'¿Posee carta de retención?',
name:''}
);

Finalmente creamos otra variable, ahora invocamos a Ext.Window creará una nueva ventana o formulario, noten el objeto items en donde tenemos al conjunto de componentes definidos anteriormente.


var win=new Ext.Window({
title: 'Registro Cliente',
bodyStyle:'padding:8px',//alejamos los componentes de los bordes
width:360,

layout:'form',
items:[NombreBox,ApellidoBox,comboFecha,CheckActividad],
buttonAlign: 'center', //botones alineados a la derecha
buttons:[{text:'Grabar'},{text:'Cancelar'}] //botones del formulario
});
win.show();

No olviden agregar la siguiente referencia a su página Web:

</p>
<script type="text/javascript" src="Formjs.js"></script>

Ahora ejecutamos nuestra página, les recuerdo que no es necesario tener un entorno de desarrollo como NetBeans, tranquilamente lo pueden probar usando html simple y cualquier browser.

Estén al tanto de tutoriales acerca de ExtJS, les dejo el código fuente Proyecto. Buen día.

→ Entradas Relacionadas:

→ Comparte esta entrada:

5 Comentarios »

datanoia said:

Formularios en ExtJS 3.0: http://bit.ly/gaVEx *rS #ExtJS #Frameworks #JavaScript #Developers

# 21 Agosto 2009 at 10:35 pm

Gsus said:

En lo personal prefiero el Jquery =)

# 2 Septiembre 2009 at 11:20 am

risharp (author) said:

Si, el Jquery también es una libreria JS muy poderosa. Gracias por visitar el blog Saludos.

# 2 Septiembre 2009 at 11:56 am

Diablo said:

Definitvamente, ExtJS es el framework mas completo,
poderoso y profesional que existe hasta el momento,
jqery, yui y el resto son puentes entre DOM y el html,
en cambio ExtJS es un FrameWork brutal. Para cosas muy
sencillas puedes utilizar JQuery por que usar ExtJS sería como matar
un mosquito con una M16, ExtJS te permite nunca salir de el si lo deseas, no tienes que lidiar con html nunca, y eso es grande.

# 25 Noviembre 2009 at 4:59 pm

Eduardo Cavero said:

Existe otra opción para preparar aplicaciones con interfaces parecidas. Smart Client tiene código bien parecido a ExtJS y es bastante interesante el hecho de que puedes construir interfaces no sólo utilizando JavaScript, sino también XML.

De hecho, así como exite GWT con Ext, también existe GWT con Smart Client.

Recién estoy jugando con Smart Client y me parece otra buena opción a considerar.

# 26 Diciembre 2009 at 2:08 pm