extjs 4.0.7

CREACION DE INTERFACES GRAFICAS DE USUARIO (GUI)
PARA LA WEB
Universidad Surcolombiana
Tecnología en Desarrollo de Software
Factoría de Software
Autor:
Ing. Juan Antonio Castro Silva
Versión: Beta 01 19NOV2012-0632

Introducción:
En este modulo vamos a trabajar con Sencha ExtJs una librería de

Objetivos:
Al finalizar este modulo el estudiante estará en capacidad de:
•
•
•
•
••
•
•
•
•
•

Crear una interface gráfica de usuario aplicando el paradigma de orientación
a objetos(clases, atributos, métodos).
Crear una grilla
Crear barras de herramientas
Manejar los eventos de botones
Crear un formulario
Crear Ventanas
Crear Paneles
Crear almacenes de datos
Validar formularios
Crear diferentes tipos de campos
Crear una aplicación aplicando el patrón de diseñoMVC (Modelo, Vista,
Controlador)

INTRODUCCION
Ext JS es una framework (marco de trabajo – librería) RIA (Rich Internet
Application
- Aplicaciones Ricas de Internet) independiente del browser (crossbrowser), fácil de usar con componentes de interface de usuario (UI) ricos,
utilizado por mas de un millón de desarrolladores alrededor del mundo.
POR QUE USAR EXTJS ???
LICENCIAMIENTOSOPORTE
HERRAMIENTAS
COMUNIDAD
USUARIOS
DESARROLLO EN EL TIEMPO - HISTORIAL
JUSTIFICAR
COMPARAR CON OTROS PRODUCTOS
EJEMPLOS DE USO
DOCUMENTACION
EJEMPLOS

0. ANTES DE INICIAR
Antes de iniciar con este modulo es necesario contar con un editor de texto y un
navegador con algunas herramientas para desarrolladores.
Recomendamos seguir usando el entorno de desarrollo integrado (IDE) eclipse yFirefox (con FireBug) o Google Chrome (con Developer Tools).
Todos los ejemplos requieren el SDK (Software Development Kit) de Ext JS 4, el cual
esta
disponible
como
una
descarga
libre
en
el
sitio
web
de
Sencha
http://www.sencha.com/products/extjs/.
Additionally, some make use of the Sencha SDK Tools, which can be downloaded from
http://www.sencha.com/products/sdk-tools/.
Sibien cada problema es un ejemplo independiente, necesitamos incluir el SDK y
adicionar el método Ext.onReady a nuestro archivo HTML, el cual ejecutará la
función pasada cuando todo sea plenamente cargado. Prepare un archivo HTML con lo
siguiente, el cual puede ser usado como un punto de inicio para la mayoría de los
ejemplos.






Ext.onReady(function () {
//El código fuente del ejemplova aquí
});





El código fuente de los ejemplos suministrado con este modulo puede ser ejecutado
como un proyecto independiente o importando cada carpeta de capitulo dentro de la
carpeta de ejemplos.

1. INSTALACION
PANTALLA DESCARGA
EXPLICACION ARCHIVOS Y CARPETAS
HOLA MUNDO – MI PRIMER PROGRAMA – EJEMPLO
Crear una aplicación web en jboss
1. Descargue el SDK de Ext JS 4 desdeel sitio web de Sencha
http://www.sencha.com/products/extjs/.
2. Descomprima el archivo descargado (ext-4xxx.zip).
3. Renombre la carpeta descomprimida y renombrela como extjs y cópiela dentro de la
aplicación de jboss gui.war.
La carpeta con el SDK de Ext JS contiene lo siguiente:

El archivo ext-all.js y ext.js contienen el framework de Ext JS 4,
El archivo ext.css contiene la hoja deestilos del SDK

Mi primer programa (Hola Mundo)
Para probar el SDK Ext JS 4 vamos a crear un programa de ejemplo:
Cree una carpeta llamada gui01 dentro del directorio de publicación y adicione un
archivo HTML con el siguiente contenido:
[gui01/index.html]
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16








Ext.onReady(function () {
//El código fuente del ejemplova aquí

Ext.Msg.alert('Aplicación', "Hola Mundo!");
});






Para hacer uso del SDK debe incluir la hoja de estilos y los archivos java script
necesarios mediante las siguientes lineas:



El método Ext.onReady(function () {…}); se ejecuta después que se han cargado los
archivos *.css y *.js, como el nombre indica cuando la pagina web este lista –
preparada (onReady).
La...