Domina Sencha ExtJS: Eleva tus Aplicaciones Web al Siguiente Nivel
Impulsa formación Sencha ExtJS A Medida para equipos técnicos, foco en componentes y despliegue, 100% bonificable para empresas. Solicita propuesta a medida.
Aprende a implementar y optimizar Sencha ExtJS en tus proyectos, mejorando la eficacia de tus equipos y reduciendo tiempos de desarrollo con una solución estructurada y eficiente.
1
Mejora la adaptabilidad de tus aplicaciones empresariales con un framework modular, garantizando una gestión eficiente de componentes, layouts y datos que maximiza la satisfacción de usuario.
Personaliza el temario al 100% para tu equipo
Diseñamos una formación a medida utilizando los documentos y flujos de trabajo reales de tu empresa.
Nueva Plataforma de E-learningFormación en directo con plataforma de apoyo para reforzar el aprendizaje
Acceso a las grabaciones
Los alumnos podrán revisar las sesiones grabadas para repasar conceptos clave, recuperar explicaciones concretas o reforzar aquellos contenidos que necesiten después de la clase en directo.
Recursos formativos
Materiales, sesiones grabadas y documentación de apoyo quedan centralizados en la plataforma para que el equipo pueda consultarlos durante y después de la formación.
Confirmación de asistencia
La plataforma permite registrar y confirmar la asistencia de los participantes, facilitando el seguimiento de la formación y la gestión documental necesaria para la bonificación FUNDAE.
Programa formativo
Temario del curso
Encuentra todo el temario del curso aquí.
Temario
Resolver qué es Ext JS y por qué se usa en aplicaciones empresariales intensivas en datos.
Entender qué problemas resuelve frente a librerías más ligeras como React, Vue o Angular.
Aclarar cuándo Ext JS encaja especialmente bien: back offices, ERPs, CRMs, paneles internos y sistemas administrativos.
Identificar cuándo puede ser excesivo si solo se necesita una web sencilla o una landing comercial.
Diferenciar framework, toolkit, componente, store, modelo, vista, controller y build.
Presentar las novedades principales de Ext JS 8.0 y su impacto en proyectos nuevos.
Explicar qué se trabajará en este primer curso y qué quedará para el curso avanzado.
Revisar qué licencias, herramientas y accesos necesita un equipo para trabajar correctamente.
Comparar Classic Toolkit y Modern Toolkit sin entrar aún en detalles complejos.
Establecer una metodología de aprendizaje: construir, entender, conectar datos, estilizar, compilar y desplegar.
Resolver qué es Ext JS y por qué se usa en aplicaciones empresariales intensivas en datos.
Entender qué problemas resuelve frente a librerías más ligeras como React, Vue o Angular.
Aclarar cuándo Ext JS encaja especialmente bien: back offices, ERPs, CRMs, paneles internos y sistemas administrativos.
Identificar cuándo puede ser excesivo si solo se necesita una web sencilla o una landing comercial.
Diferenciar framework, toolkit, componente, store, modelo, vista, controller y build.
Presentar las novedades principales de Ext JS 8.0 y su impacto en proyectos nuevos.
Explicar qué se trabajará en este primer curso y qué quedará para el curso avanzado.
Revisar qué licencias, herramientas y accesos necesita un equipo para trabajar correctamente.
Comparar Classic Toolkit y Modern Toolkit sin entrar aún en detalles complejos.
Establecer una metodología de aprendizaje: construir, entender, conectar datos, estilizar, compilar y desplegar.
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.
Tema 8: Eventos, listeners y comunicación entre componentes
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.
Tema 9: Formularios empresariales y validación
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.
Tema 10: Grids: el corazón de muchas aplicaciones Ext JS
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.
Tema 11: Stores, Models y Proxies: trabajar bien con datos
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.
Tema 12: MVVM, ViewModel y data binding
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.
Tema 13: Controllers, ViewControllers y separación de responsabilidades
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.
Tema 14: Routing y navegación en aplicaciones SPA
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.
Tema 15: TreePanel, menús jerárquicos y datos anidados
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.
Tema 16: Componentes nuevos y capacidades destacadas de Ext JS 8
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.
Tema 17: Theming, estilos y apariencia corporativa
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.
Tema 18: Responsive design y experiencia multiplataforma
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.
Tema 19: Accesibilidad y usabilidad en aplicaciones Ext JS
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.
Tema 20: Builds, perfiles y despliegue con Sencha Cmd
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.
Tema 21: Integración con backend y APIs REST
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.
Tema 22: Seguridad frontend y control de permisos
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.
Tema 23: Depuración, diagnóstico y errores frecuentes
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.
Tema 24: Introducción a ReExt y convivencia con React
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.
Tema 25: Buenas prácticas para equipos que empiezan con Ext JS
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.
Tema 26: Proyecto final integrador de Sencha Ext JS
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.
Perfiles profesionales
Pensado para quienes deben dominar Sencha ExtJS en su día a día
Desarrolladores frontend JavaScript
Profesionales que ya conocen HTML, CSS y JavaScript y necesitan aprender a trabajar con un framework empresarial basado en componentes, arquitectura estructurada y alto volumen de datos.
Equipos de mantenimiento de aplicaciones Ext JS
Perfiles que heredan aplicaciones creadas con versiones anteriores de Ext JS y necesitan comprender su estructura, toolkits, stores, controllers, vistas, layouts y flujo de trabajo actual.
Desarrolladores full stack
Profesionales backend o full stack que deben conectar APIs, servicios REST, autenticación, datos empresariales y lógica de negocio con interfaces Ext JS.
Preguntas frecuentes
Resolvemos todas tus dudas sobre nuestra formación en Sencha ExtJS
Explora las respuestas a las preguntas que guian a nuestra comunidad. Aqui encontraras claridad sobre como funciona todo, desde el acceso hasta los detalles de los cursos. Si buscas respuestas, este es el lugar para comenzar.
La versión de referencia será Sencha Ext JS 8.0.0, actualmente documentada por Sencha y lanzada como una actualización mayor del framework.
Sencha indica que Ext JS 8.0 mantiene compatibilidad hacia atrás y que una versión mayor no implica necesariamente reescrituras completas, aunque cada aplicación debe validarse antes de actualizar.
Se trabajan ambos. El curso explica cuándo usar Classic, cuándo Modern y cómo tomar una decisión razonada según tipo de aplicación.
Incluye grids profesionales de nivel base/intermedio: columnas, filtros, paginación, selección, renderers, stores y acciones. La optimización extrema, grids masivos y personalización profunda quedarán para el curso avanzado.
Sí. Se trabaja Sencha Cmd para crear, compilar, construir y desplegar aplicaciones. Ext JS 8 incorpora Sencha Cmd 8 con soporte de JavaScript moderno hasta ECMAScript 2025.
Sí. Se revisan Signature Pad, QR Code Reader & Generator, mejoras de grids, Font Awesome 7, ARIA, tri-state checkbox y mejoras del Modern Toolkit.
Sí, pero solo como introducción. La integración avanzada con React, estrategias híbridas y patrones complejos se reservarán para el curso avanzado.
No. Es necesario conocer JavaScript, HTML, CSS, APIs REST y conceptos básicos de desarrollo web.
El curso avanzado profundizará en arquitectura a gran escala, rendimiento, custom components, plugins, paquetes, migraciones 6/7 a 8, testing, CI/CD, seguridad avanzada, ReExt, mantenimiento enterprise y optimización de aplicaciones críticas.
Sí. Al tratarse de formación corporativa orientada a empresa, puede bonificarse hasta el 100% mediante FUNDAE según el crédito disponible y las condiciones aplicables de la organización.
Sencha indica que Ext JS 8.0 mantiene compatibilidad hacia atrás y que una versión mayor no implica necesariamente reescrituras completas, aunque cada aplicación debe validarse antes de actualizar.
Se trabajan ambos. El curso explica cuándo usar Classic, cuándo Modern y cómo tomar una decisión razonada según tipo de aplicación.
Incluye grids profesionales de nivel base/intermedio: columnas, filtros, paginación, selección, renderers, stores y acciones. La optimización extrema, grids masivos y personalización profunda quedarán para el curso avanzado.
Sí. Se trabaja Sencha Cmd para crear, compilar, construir y desplegar aplicaciones. Ext JS 8 incorpora Sencha Cmd 8 con soporte de JavaScript moderno hasta ECMAScript 2025.
Sí. Se revisan Signature Pad, QR Code Reader & Generator, mejoras de grids, Font Awesome 7, ARIA, tri-state checkbox y mejoras del Modern Toolkit.
Sí, pero solo como introducción. La integración avanzada con React, estrategias híbridas y patrones complejos se reservarán para el curso avanzado.
No. Es necesario conocer JavaScript, HTML, CSS, APIs REST y conceptos básicos de desarrollo web.
El curso avanzado profundizará en arquitectura a gran escala, rendimiento, custom components, plugins, paquetes, migraciones 6/7 a 8, testing, CI/CD, seguridad avanzada, ReExt, mantenimiento enterprise y optimización de aplicaciones críticas.
Sí. Al tratarse de formación corporativa orientada a empresa, puede bonificarse hasta el 100% mediante FUNDAE según el crédito disponible y las condiciones aplicables de la organización.
Diseñemos hoy el curso que tu empresa necesita
Cuéntanos tus objetivos de negocio y prepararemos una propuesta formativa bonificable totalmente ad hoc
Potencia la capacidad de tus equipos para depurar y optimizar código, asegurando un rendimiento superior y una experiencia de usuario impecable en múltiples plataformas.
3
Facilita el desarrollo colaborativo y la administración centralizada con Sencha CMD, aumentando la productividad y la calidad de tus proyectos con procesos automatizados y buenas prácticas.
Después de la formación en directo, los alumnos podrán acceder a ejercicios prácticos para aplicar lo trabajado en clase y consolidar el aprendizaje con actividades guiadas.
Acceso a las grabaciones
Los alumnos podrán revisar las sesiones grabadas para repasar conceptos clave, recuperar explicaciones concretas o reforzar aquellos contenidos que necesiten después de la clase en directo.
Recursos formativos
Materiales, sesiones grabadas y documentación de apoyo quedan centralizados en la plataforma para que el equipo pueda consultarlos durante y después de la formación.
Confirmación de asistencia
La plataforma permite registrar y confirmar la asistencia de los participantes, facilitando el seguimiento de la formación y la gestión documental necesaria para la bonificación FUNDAE.
Ejercicios prácticos
Después de la formación en directo, los alumnos podrán acceder a ejercicios prácticos para aplicar lo trabajado en clase y consolidar el aprendizaje con actividades guiadas.
Practica y mejora con nuestra plataforma
Una plataforma practica, con IA integrada y pensada para que mejores desarrollando. Se adapta a tu ritmo, te corrige al instante y te muestra tu progreso real.
Correccion magica
Feedback inteligente
Aprende de cada acierto y fallo con explicaciones claras
Personas que necesitan evaluar Ext JS 8, entender sus capacidades actuales, definir estándares de desarrollo y orientar a equipos que trabajan con aplicaciones críticas.
Consultores y equipos de software empresarial
Perfiles que desarrollan soluciones para clientes en sectores como banca, seguros, industria, administración, logística, salud, educación o gestión corporativa.
Equipos de modernización frontend
Profesionales que trabajan en evolución de aplicaciones legacy y quieren entender qué parte debe resolverse con Ext JS base y qué parte debe reservarse para una fase avanzada.