Sencha ExtJS Intro

1. Sencha ExtJS
Christian Portilla Pauca
Desarrollador Web UX/UI

2. Están listos para Sencha?

3. Porque usarlo?
 “Ext JS is the core client-side framework for
Marketo applications. Ext JS 4 delivers a
modern framework that enables us to add
new features in a couple of weeks instead of
months."
 Marketo (Glen Lipka ) VP of User Experience
 “Ext JS es el framework base de
aplicaciones de Marketo. Ext JS
entrega un framework moderno que
nos permite añadir caracteristicas
nuevas en un par de semanas en vez
de meses.”

4. Que es Sencha ExtJS

5. Que es Sencha Ext JS
 Sencha ExtJS es la mas poderosa
plataforma de desarrollo de interfaces
desktop en Web con compatibilidad sin
igual para todos los navegadores mas
utilizados, arquitectura MVC, capacidad
de dibujo de charts y modernos
componentes de UI.

6. Sencha ExtJS y MVC
 Sencha ExtJS tiene un desarrollo MVC:
 Modelo: Stores, Models.
 Vista: Grids, ListViews, Panels, Templates, etc.
 Controlador: Listeners, Controllers,TaskRunners,
etc.
 El desarrollo se basa en el patrón de Modelo-
Vista-Controlador, todo esto es sobre
Javascript y se ejecuta en el navegador del
usuario.

7. MVC

8. Ventajas
 Orientado a Objetos
 Controles de Interfaz de usuario
 Soporte de HTML5
 Arquitectura MVC
 Temas y estilos
 Documentación

9. ExtJS – Modo de uso
 Para proceder a instalar ExtJS 4.x
haremos lo siguiente:
 Nos dirigimos al URL: http://
www.sencha.com/products/extjs/download/
 Procedemos descargar la versión de ExtJS que
usaremos, en este curso se usara el 4.2 GPL.
 Luego debemos descomprimir el framework en
una carpeta accesible a nuestro proyecto en
desarrollo.

10. Sencha CMD
 Sencha CMD es una herramienta de
línea de comandos multi-plataforma
que provee muchas tareas automáticas
para un completo ciclo de vida de
desarrollo de aplicaciones desde
generar un proyecto hasta desplegar
una aplicación en producción.

11. Sencha CMD
 Para usar esta herramienta debemos
instalar:
 Java 1.6 en adelante.
 Ant
 Ruby
 Sass y Compass
 Y el instalador de Sencha CMD.

12. Sencha CMD - Comandos
 Sencha help .- Ayuda de Sencha Cmd
 Sencha app build .- construccion de app.
 sencha -sdk /path/to/sdk generate app
nombre_app ./directorio_app .- generacion de
app.
 sencha fs web -port 8000 start -map
./directorio
 .- ejecucion de servidor Web de apps.

13. Un poco de código ….

14. Fin
 Gracias