ExtJS Framework
Jan 29, 2009 | Carousel | By Crysfel | 168 Comments | Read in EnglishCon pocas líneas de código es posible realizar interfaces amigables para los usuarios. Es la librería más avanzada para el desarrollo rápido de aplicaciones con un look and feel totalmente novedoso y una arquitectura flexible. Este curso es impartido para nivel principiante y avanzado.
Author: Crysfel
I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter
A continuación se muestra el temario del curso, cada semana se estarán subiendo capitulos
Introducción
Presentación del ponente, definición de objetivos y alcance del curso, también se hacen delimitaciones, limitaciones y requisitos para tomar el curso.
• Introducción (6:39 minutos).
Instalación
Conocimientos y conceptos básicos para comenzar a trabajar a tu manera, es importante saberlos para evitar problemas en el futuro.
• ¿Dónde conseguir ExtJS? ¿Hay que pagar? ¿es gratis? (3:49 minutos)
• Instalación básica del framework (7:06 minutos)
• Instalación de temas o “look and feel” (5:29 minutos)
• Que son los adapters y en que me beneficia (6:03 minutos)
• Definición de la imágen spacer y su importancia (5:48 minutos)
• Quizz: Primer capitulo del curso de ExtJS
Localización
Mediante ExtJS, es posible internacionalizar los widgets en diferentes lenguajes, por defecto se utiliza el Ingles, pero es posible hacer traducciones a otros lenguajes o buscar si alguien mas ya la ha realizado.
• Instalando tu idioma (8:54 minutos)
• Varios idiomas en un mismo sitio (9:07 minutos)
JavaScript orientado a objetos
Se definen términos y conceptos para programar orientado a objetos en JavaScript utilizando algunas utilerías que ExtJS nos proporciona para una fácil implementación.
• Referencias en JavaScript (9:39 minutos)
• ¿Que es el scope o alcance de una variable? (8:14 minutos)
• ¿Qué son los Closures? (12:32 minutos)
• El contexto y la variable “this”
• Creación de objetos y métodos públicos
• Métodos privados y métodos privilegiados
• Paquetes y namespace
• Herencia en JavaScript
• Quizz: Conceptos fundamentales de JavaScript (Parte I)
• Quizz: JavaScript orientado a objetos (Parte II)
Conceptos de ExtJS
Trabajando con el DOM
Se muestran las utilerías de Ext para manipular el DOM, trabajar con efectos y animaciones, realizar búsquedas en el DOM y aplicar eventos.
• Conociendo al objeto “Element” (13:17 minutos)
• La clase “DomHelper” (16:11 minutos)
• Buscar elementos en el DOM con selectores
• Aplicar efectos visuales a Elementos (19:30 minutos)
• Quizz: Trabajando con el DOM
Mensajes y eventos
Se muestra como mostrar mensajes al usuario, como crear eventos sobre elementos del DOM
• Alertas y mensajes al usuario (20:55 minutos)
• Manejo de eventos sobre Elementos y componentes
• Quizz: Mensajes y Eventos
Ajax y el objeto Store
Se muestra como realizar peticiones Ajax al servidor, se define el concepto del store y su importancia para el intercambio de información.
• El objeto Ajax, peticiones GET y POST
• ¿Qué es un store y cómo funciona?
• Leer información de un XML
• Leer información en formato JSON
• Quizz: Ajax y el objeto Store
Paneles, Ventanas y Pestañas
El panel es uno de los componentes mas utilizados en el framework es de importancia comprender su funcionamiento, las ventanas son útiles para almacenar otros componentes.
• ¿Que es un panel, para que sirve y cómo se crean? (22:08 minutos)
• Una ventana flotante (12:50 minutos)
• Barras de herramientas en paneles y ventanas
• Barra de status en paneles y ventanas
• Las Pestañas o Tabs
Los Formularios
Se muestra como crear formularios, validaciones, diferentes controles para capturar información e interactuar con un servidor para obtener y guardar información.
• Formularios y campos comunes en ExtJS
• ComboBox cargados localmente y remotamente (Ajax)
• Combos dependientes
• Un calendario para capturar fechas
• Llenar formularios con información del servidor
• Guardar información en el servidor
• Validaciones simples en formularios
• Validaciones personalizadas
• Campos Compuestos
Gráficas
Uno de los nuevos componentes de ExtJS 3.0 nos permite crear gráficas de diferentes tipos, en este capítulo mostramos algunas
• Gráficas en ExtJS 3
• Graficando series
Las Tablas
Este componente es muy utilizado para desplegar información, permite realizar muchas tareas de manera fácil y rápida.
• Una tabla básica con información cargada de un array
• Mostrar información de un archivo XML
• Información contenida en formato JSON
• Paginado remoto en un Grid (Ajax)
• Formatear la información y agregar html a las celdas
• Utilizando fechas y tiempo en un Grid
• Editar la fila de un Grid en un formulario
• Grid con columnas dinámicas
Edición de tablas
En ocasiones es conveniente poder editar la información directamente en una tabla, de esta manera evitamos abrir un formulario con la información en cada campo.
• Editar las celdas de un grid
• Editar una celda mediante un Combobox
• Guardar los cambios del Grid editable usando Ajax
• Agrupado y Sumatoria de Columnas
• CRUD de un catálogo de contactos
Árboles con ExtJS
Los árboles son útiles para mostrar de forma visual una jerarquía de organización, por ejemplo un directorio de documentos, una familia o grupo de personas, etc. Ext proporciona el componente ideal para esta tarea.
• El componente Tree Panel
• Arboles generados con Ajax
• Cambiar íconos de los nodos
• Desplegar el sistema de archivos del servidor
• Explorador de archivos para el servidor
• Drag and Drop para ordenar los nodos (Guardarlos en MySQL)
• Modificar los nodos seleccionados
Layouts y maquetación
Los layout se utilizan para crear la maquetación de un sitio, ExtJS provee maneras diferentes para lograr este objetivo, en este capitulo se analizan algunas.
• Border layout
• Border layout (9:19)
• Table Layout (9:31)
• El Viewport y sus regiones
• El acordeón
• Combinación de layouts
Plugins y extensiones
La comunidad de ExtJS es muy activa, prueba de ello es la cantidad de plugins que se han desarrollado y son ofrecidos de manera gratuita, aquí se muestran algunos de ellos y como integrarlos a tu proyecto.
• Herencia con ExtJS
Ejemplos variados
• Integración del FormPanel y el GridPanel
• Creando un Wizard
• Editando una Imagen
• Una encuesta dinámica
• Integración del TreePanel y TabPanel
• ExtJS Desktop – Creación de módulos
Commercial ExtJs and Sencha Touch Themes
El curso esta excelente.