Curso de Sencha ExtJS para equipos de desarrollo y despliegue

Instalar Node.js, npm, Sencha Cmd, ExtGen y dependencias necesarias.

Revisar diferencias entre instalación vía npm, descarga ZIP, trial y registry privado de Sencha.

Crear una aplicación inicial con ExtGen o Sencha Cmd.

Entender la estructura generada: `app`, `classic`, `modern`, `resources`, `app.json`, `workspace.json` y paquetes.

Ejecutar la aplicación en modo desarrollo con recarga y observación de cambios.

Localizar errores habituales de instalación: Java, PATH, registry, permisos, proxy corporativo y versiones.

Abrir el proyecto en Visual Studio Code o JetBrains con configuración cómoda para el equipo.

Revisar cómo se inspecciona una app Ext JS desde DevTools.

Crear una primera modificación visual para verificar que el flujo funciona.

Documentar el entorno mínimo que deberá replicar cualquier alumno o equipo técnico.

Entender por qué Ext JS ofrece dos toolkits y qué implica cada uno.

Usar Classic Toolkit para aplicaciones empresariales de escritorio, grids complejos y back offices densos.

Valorar Modern Toolkit para interfaces adaptables, móviles, tablet, web apps modernas y experiencias más ligeras.

Comparar diferencias de componentes, comportamiento, temas y estructura.

Identificar qué toolkit conviene elegir en un proyecto nuevo.

Revisar cuándo tiene sentido mantener ambos toolkits en una misma solución.

Evitar mezclar criterios de Classic y Modern sin entender sus diferencias.

Crear una vista sencilla en cada toolkit para comparar sintaxis y comportamiento.

Revisar limitaciones, ventajas y casos típicos de cada enfoque.

Definir una recomendación de toolkit para distintos escenarios empresariales.

Recorrer el ciclo completo de arranque de una aplicación.

Entender `Ext.application`, namespaces, clases, requires, controllers y vistas iniciales.

Localizar dónde se declaran rutas, vistas, stores, modelos, temas y recursos.

Diferenciar código de aplicación, código framework, recursos estáticos y configuración de build.

Organizar carpetas para evitar proyectos difíciles de mantener.

Comprender cómo Ext JS carga clases y dependencias.

Revisar qué hace Sencha Cmd durante desarrollo y compilación.

Crear una pequeña estructura modular por áreas funcionales.

Evitar proyectos donde todo acaba en una única vista gigante.

Preparar una estructura base para aplicaciones empresariales medianas.

Entender `Ext.define`, `extend`, `alias`, `xtype`, `config`, `requires` y `mixins`.

Crear clases propias siguiendo convenciones de Sencha.

Usar herencia para especializar componentes sin duplicar código.

Diferenciar configuración inicial, propiedades internas y métodos públicos.

Trabajar con `callParent` cuando se extiende una clase base.

Crear componentes reutilizables con xtype propio.

Evitar herencias profundas que vuelven el mantenimiento confuso.

Revisar cómo encontrar documentación y código fuente desde la API oficial.

Crear una pequeña librería interna de componentes básicos.

Definir reglas de nombres, namespaces y ubicación de clases.

Crear paneles, contenedores, botones, toolbars, ventanas, menús, pestañas y diálogos.

Entender la jerarquía de componentes dentro de una vista.

Usar `xtype` para construir interfaces declarativas.

Manejar propiedades comunes: `title`, `items`, `width`, `height`, `margin`, `padding`, `hidden`, `disabled` y `reference`.

Añadir acciones y comportamiento mediante handlers y listeners.

Diferenciar componentes de presentación, contenedores y componentes de entrada.

Crear ventanas modales para edición, confirmación o detalle.

Mantener una separación razonable entre estructura visual y lógica.

Evitar configuraciones repetidas mediante componentes base.

Construir una pantalla funcional con navegación, paneles y acciones básicas.

Entender por qué los layouts son críticos en Ext JS.

Usar `fit`, `vbox`, `hbox`, `border`, `card`, `anchor`, `form`, `table` y layouts habituales.

Construir interfaces fluidas sin abusar de tamaños fijos.

Crear layouts de tipo dashboard, formulario, detalle maestro y pantalla dividida.

Ajustar `flex`, `align`, `pack`, `region`, `split` y comportamiento responsive.

Detectar problemas típicos de overflow, paneles invisibles o tamaños mal calculados.

Adaptar layouts a pantallas de escritorio, tablet y resoluciones corporativas.

Diseñar zonas de navegación, contenido, detalle, filtros y acciones.

Crear un patrón de pantalla empresarial reutilizable.

Revisar la experiencia visual antes de pasar a componentes más complejos.

Entender el sistema de eventos de Ext JS y su diferencia respecto al DOM puro.

Crear listeners para clicks, selección, cambios de campo, carga de store y acciones de usuario.

Usar `fireEvent` para comunicar componentes cuando procede.

Evitar acoplar componentes mediante referencias globales o búsquedas frágiles.

Manejar eventos de ciclo de vida: render, show, hide, activate, destroy y afterrender.

Conectar eventos con ViewController de forma limpia.

Controlar propagación, scopes y referencias.

Crear eventos personalizados en componentes propios.

Depurar eventos con logs y DevTools.

Establecer criterios para que la comunicación no se convierta en una red invisible.

Crear formularios con textfields, combos, datefields, numberfields, checkboxes, radios y textareas.

Organizar formularios largos con fieldsets, tabs, columnas y secciones.

Aplicar validaciones obligatorias, formatos, rangos, máscaras y validadores personalizados.

Cargar datos desde un modelo o respuesta de API.

Enviar datos a servicios backend con control de errores.

Mostrar mensajes de validación claros para el usuario.

Gestionar estados de edición, solo lectura, creación y detalle.

Usar combos con stores locales y remotos.

Diseñar formularios que funcionen bien con teclado y accesibilidad básica.

Crear un patrón de formulario CRUD reutilizable.

Crear grids con columnas, stores, renderers, selección y acciones.

Configurar columnas de texto, fecha, número, booleanos, acciones y plantillas.

Aplicar ordenación, filtros, paginación y carga remota.

Diseñar toolbars de búsqueda, acciones masivas y exportación básica.

Usar renderers con criterio sin meter lógica excesiva en la columna.

Gestionar selección simple, múltiple y comportamiento al refrescar datos.

Crear grids de listado, grids de detalle y grids dentro de paneles maestros.

Revisar mejoras actuales de rendimiento y grid en Ext JS 8, especialmente para grandes volúmenes de datos y Modern Toolkit.

Evitar grids sobrecargados que mezclan demasiadas responsabilidades.

Construir una pantalla de gestión con grid, filtros y formulario de edición.

Definir modelos con campos, tipos, validaciones y relaciones básicas.

Crear stores locales, remotos, paginados y filtrables.

Usar proxies REST y AJAX para conectar con APIs.

Configurar readers y writers para JSON.

Gestionar carga, sincronización, creación, actualización y borrado de registros.

Manejar errores de servidor, timeouts y respuestas no válidas.

Aplicar filtros locales y remotos de forma consciente.

Entender cambios introducidos en Ext JS 7.9 sobre autoload en stores con remoteFilter y remoteSort programáticos.

Diseñar una capa de datos clara para evitar duplicidad de lógica.

Crear un flujo CRUD completo con datos reales o mockeados.

Entender el patrón MVVM en Ext JS y cuándo aporta valor.

Crear ViewModels para estado de pantalla, datos enlazados y fórmulas.

Usar data binding para textos, visibilidad, habilitación, valores y estados.

Definir formulas para derivar información sin duplicar lógica.

Combinar ViewModel con stores asociados a una vista.

Evitar meter lógica de negocio compleja dentro del ViewModel.

Conectar cambios de formulario con estado de botones y validaciones.

Crear interfaces más reactivas sin manipulación manual constante.

Depurar problemas de binding y referencias.

Construir una pantalla donde el estado se gestione con MVVM de forma limpia.

Diferenciar controller global, ViewController y lógica de componente.

Crear handlers y métodos de controlador con nombres claros.

Gestionar acciones de usuario desde el ViewController.

Separar lógica visual, lógica de datos y lógica de negocio.

Evitar controladores gigantes que absorben toda la aplicación.

Usar referencias para localizar componentes de forma segura.

Coordinar carga de datos, navegación y mensajes desde el controller.

Crear servicios auxiliares cuando una lógica se repite en varias vistas.

Probar manualmente flujos de usuario controlados por ViewController.

Definir una guía interna de responsabilidades por archivo.

Entender cómo Ext JS permite construir aplicaciones de una sola página.

Crear rutas para módulos, pantallas, fichas, detalle y navegación profunda.

Sincronizar URL, estado de aplicación y componente activo.

Usar layouts tipo card para navegación interna.

Gestionar permisos o acceso a rutas según usuario.

Crear menús laterales, barras superiores y navegación por módulos.

Evitar rutas poco descriptivas o imposibles de compartir.

Manejar refresco de navegador, entrada directa por URL y navegación atrás.

Preparar una estructura de aplicación modular con rutas claras.

Construir un pequeño portal interno con navegación funcional.

Crear árboles para menús, estructuras organizativas, categorías y expedientes.

Configurar nodos, iconos, selección, expansión, carga remota y acciones.

Usar TreeStore para datos jerárquicos.

Incorporar tri-state checkbox en escenarios donde un estado parcial resulta necesario.

Entender la novedad de tri-state checkbox en TreePanel incorporada en Ext JS 8.0.

Crear árboles combinados con grids o paneles de detalle.

Cargar nodos bajo demanda para mejorar rendimiento.

Evitar árboles enormes sin paginación, búsqueda o estructura visual.

Diseñar un menú lateral empresarial con permisos.

Preparar un patrón de navegación jerárquica mantenible.

Revisar el nuevo Responsive Digital Signature Pad para capturar firmas dentro de aplicaciones.

Entender casos de uso de firma digital en logística, contratos, validaciones, aprobaciones y formularios internos.

Explorar QR Code Reader & Generator para flujos offline-to-online, retail, pagos, trazabilidad o identificación.

Incorporar Font Awesome 7 en interfaces modernas y coherentes.

Revisar mejoras ARIA para campos y accesibilidad en Modern Toolkit.

Valorar lockable grid plugin en Modern Toolkit para vistas tipo reporte.

Analizar buffered renderer con horizontal buffering en grids de muchos datos.

Crear ejemplos sencillos de uso de componentes nuevos sin sobredimensionar la aplicación.

Decidir qué novedades son útiles para el proyecto y cuáles no aportan valor inmediato.

Documentar compatibilidad y requisitos antes de incorporar componentes nuevos en producción.

Entender cómo Ext JS gestiona temas, variables, SASS y recursos.

Usar temas base y personalización visual sin romper componentes.

Configurar colores, tipografías, iconos, tamaños, espaciados y estados.

Trabajar con Sencha Themer cuando esté disponible en la organización.

Incorporar Font Awesome 7 manteniendo compatibilidad visual.

Crear estilos corporativos para botones, paneles, formularios, grids y ventanas.

Evitar CSS global agresivo que rompe componentes del framework.

Separar estilo de componente, tema general y ajustes puntuales.

Revisar accesibilidad visual: contraste, foco, tamaños y estados.

Preparar una guía visual básica para aplicaciones Ext JS.

Diseñar pantallas que funcionen en escritorio, portátil, tablet y resoluciones corporativas.

Usar layouts flexibles y reglas responsive.

Adaptar toolbars, menús, grids y formularios a espacios reducidos.

Decidir cuándo una pantalla empresarial debe simplificarse en móvil.

Comparar comportamiento responsive en Classic y Modern.

Evitar replicar una interfaz de escritorio completa en pantallas pequeñas sin adaptación.

Crear vistas alternativas cuando la experiencia lo exige.

Revisar interacción táctil, scroll, selección y tamaño de controles.

Probar la aplicación con DevTools y dispositivos simulados.

Definir criterios de responsive realistas para aplicaciones internas.

Entender por qué la accesibilidad importa en aplicaciones empresariales internas.

Revisar foco, navegación con teclado, contraste, etiquetas y roles ARIA.

Aprovechar mejoras de Ext JS 8.0 en soporte ARIA para campos.

Crear formularios más claros con mensajes de error comprensibles.

Diseñar grids y controles que no dependan solo del ratón.

Evitar interfaces saturadas que dificultan tareas frecuentes.

Revisar tooltips, iconos, estados deshabilitados y mensajes.

Incorporar feedback visual ante carga, guardado, error y éxito.

Crear una checklist básica de accesibilidad para nuevas pantallas.

Integrar accesibilidad en la Definition of Done del equipo.

Entender el papel de Sencha Cmd en generación, compilación, empaquetado y optimización.

Crear builds de desarrollo, testing y producción.

Revisar configuración de `app.json` y perfiles de build.

Gestionar recursos, temas, dependencias y paquetes.

Aprovechar Sencha Cmd 8 y ExtGen 8.0.0 con soporte ECMAScript hasta ES2025.

Controlar errores de compilación, warnings y dependencias faltantes.

Configurar builds para distintos entornos.

Reducir peso de aplicación evitando dependencias innecesarias.

Publicar una build en un servidor web o entorno interno.

Documentar comandos frecuentes para el equipo.

Diseñar comunicación entre Ext JS y servicios backend.

Consumir endpoints REST con parámetros, filtros, paginación y ordenación.

Enviar formularios y cambios de store al servidor.

Gestionar errores HTTP, validaciones de backend y mensajes de usuario.

Preparar mocks para desarrollar frontend sin backend completo.

Implementar autenticación básica mediante tokens o sesiones según arquitectura.

Separar configuración de URLs por entorno.

Evitar lógica de negocio duplicada entre frontend y backend.

Crear una capa de servicio o utilidades para llamadas comunes.

Construir un flujo completo de listado, detalle, alta, edición y eliminación.

Entender qué puede y qué no puede protegerse desde frontend.

Ocultar, deshabilitar o restringir acciones según rol del usuario.

Coordinar permisos visuales con validación real en backend.

Gestionar sesiones expiradas y redirección a login.

Evitar exponer tokens, claves, endpoints internos o información sensible en el cliente.

Validar datos en frontend para mejorar experiencia, no como única barrera.

Mostrar errores sin filtrar información técnica innecesaria.

Configurar rutas y módulos según permisos.

Revisar riesgos habituales en aplicaciones administrativas.

Crear un patrón básico de autenticación y autorización visual.

Leer errores de consola y trazas de Ext JS sin perderse.

Depurar carga de clases, stores, eventos, bindings y layouts.

Usar Sencha Cmd, logs y DevTools para localizar problemas.

Detectar errores típicos: xtype inexistente, dependencia no cargada, reference mal definida o store sin datos.

Resolver pantallas en blanco por fallo de arranque o excepción temprana.

Analizar problemas de layout que parecen errores de CSS.

Revisar llamadas de red, payloads, respuestas y tiempos.

Crear mensajes de error útiles para usuarios y técnicos.

Documentar incidencias frecuentes en una guía interna.

Establecer un método de diagnóstico antes de tocar código al azar.

Entender qué es ReExt y por qué permite integrar componentes Ext JS en aplicaciones React.

Revisar que ReExt 1.2 añade compatibilidad con Ext JS 8.0.

Identificar escenarios donde React y Ext JS deben convivir.

Diferenciar integración puntual de una estrategia de migración completa.

Valorar cuándo conviene usar componentes Ext JS dentro de React.

Evitar mezclar paradigmas sin arquitectura clara.

Crear una visión general de cómo se integraría un componente.

Dejar los patrones avanzados de integración para el curso siguiente.

Documentar riesgos de estado duplicado, styling y comunicación.

Presentar ReExt como puente posible, no como sustituto automático de una estrategia técnica.

Definir convenciones de carpetas, nombres, módulos y componentes.

Separar vistas, controllers, ViewModels, stores, modelos y servicios.

Crear componentes reutilizables antes de copiar pantallas completas.

Mantener formularios y grids con responsabilidades claras.

Evitar lógica de negocio enterrada en renderers o listeners.

Documentar patrones internos de pantalla, modal, listado, detalle y edición.

Revisar código en equipo con criterios específicos de Ext JS.

Crear ejemplos base para nuevas funcionalidades.

Mantener una guía de estilos y componentes aprobados.

Preparar al equipo para evolucionar hacia temas avanzados sin deuda inicial.

Crear una aplicación empresarial completa de gestión interna con Ext JS 8.

Diseñar estructura de proyecto, módulos, navegación, rutas y layout general.

Implementar login simulado, menú lateral, dashboard y varias pantallas funcionales.

Crear modelos, stores y proxies conectados a APIs mockeadas o reales.

Construir un grid con filtros, paginación, acciones y formulario de edición.

Añadir una pantalla con TreePanel o datos jerárquicos.

Incorporar validaciones, mensajes de error, estados de carga y permisos visuales.

Personalizar tema, iconos, estilos básicos y comportamiento responsive.

Generar build de producción con Sencha Cmd o ExtGen.

Presentar la aplicación final con documentación técnica, decisiones tomadas y mejoras pendientes para la fase avanzada.