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>.
1 | <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> |
2 | <script type="text/javascript" src="ext/ext-all.js"></script> |
3 | <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> |
4 | <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">
3 | Ext.Msg.alert('Mensaje', '¡Buenos días Risharp!');}); |
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.
1<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:
1function Registro(){}
Definimos las siguientes variables, noten que instanciamos a la clase “Ext.form” y luego definimos que tipo de componente será.
01 | var NombreBox= new Ext.form.TextField({ |
03 | emptyText:'Ingrese Nombres', |
04 | var ApellidoBox= new Ext.form.TextField({ |
05 | fieldLabel: 'Apellidos', |
06 | emptyText:'Ingrese Apellidos',}); |
08 | var comboFecha = new Ext.form.ComboBox({ |
09 | fieldLabel:'Fecha de Ingreso', |
12 | store:[2001,2002,2003,2004,2005,2006,2007,2008], |
15 | var CheckActividad = new Ext.form.Checkbox( |
19 | boxLabel:'¿Posee carta de retención?', |
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.
01 | var win=new Ext.Window({ |
02 | title: 'Registro Cliente', |
03 | bodyStyle:'padding:8px', |
07 | items:[NombreBox,ApellidoBox,comboFecha,CheckActividad], |
09 | buttons:[{text:'Grabar'},{text:'Cancelar'}] |
No olviden agregar la siguiente referencia a su página Web:
2 | <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.
