Formularios en ExtJS 3.0
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:
Formularios en ExtJS 3.0: http://bit.ly/gaVEx *rS #ExtJS #Frameworks #JavaScript #Developers
En lo personal prefiero el Jquery =)
Si, el Jquery también es una libreria JS muy poderosa. Gracias por visitar el blog Saludos.
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.
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.
Deja tu Opinión
Síguenos
Feed RSS:
Recibe nuestros artículos via Feed
RSS via E-Mail:
Recibe nuestros artículos en tu Mail
Twitter:
Síguenos en Twitter @datanoia
Etiquetas
Licencia
Últimos Posts
Comentarios
Acerca de
Datanoia.com es el resultado de varias reuniones con café e internet inalámbrico entre amigos quienes buscan compartir experiencias y hablar sobre lo que más les gusta: la tecnología y el internet.
Ellos basarán cada post en vivencias propias frente al computador, escribirán sobre las novedades en el mundo tecnológico, darán su opinión frente a las distintas posturas en internet y contarán todos sus trucos informáticos. Por lo que tu colaboración como lector es importante comentando los artículos y aportando nuevas ideas.
Most Commented
Archivo