Novedades en Ext JS 8.0

Desbloquea un Conjunto de Actualizaciones Modernas y Nuevas Capacidades sin Problemas

Estamos emocionados de previsualizar Ext JS 8.0, que introduce un conjunto integral de nuevas características, mejoras y componentes tanto en el Modern Toolkit como en el Classic Toolkit.

Nuestro Compromiso con las Actualizaciones sin Problemas

Antes de sumergirnos en las nuevas características, es importante aclarar qué significa una versión mayor de Ext JS. Una versión mayor no implica grandes cambios que rompan la compatibilidad o reescrituras forzadas de la aplicación. Nuestro versionado sigue un modelo de evolución continua:

7.1 → 7.9: Mejoras incrementales.

8.0 → 8.9 → 9.x: Evolución continua, actualizaciones fluidas desde versiones anteriores.

Minimizamos activamente los cambios que rompen la compatibilidad y priorizamos la compatibilidad con versiones anteriores. Ext JS 8.0 está diseñado para ser una actualización fluida para las aplicaciones existentes, con solo ajustes menores donde sea necesario. Las versiones mayores marcan hitos en la hoja de ruta, no la necesidad de reescribir tu código base. Esta actualización introducirá mejoras notables en accesibilidad, componentes de medios enriquecidos y rendimiento de cuadrículas (grids), haciendo que Ext JS sea más potente y flexible que nunca para el desarrollo de aplicaciones empresariales. En este blog, analizamos las adiciones y mejoras clave que llegarán en Ext JS 8.0.

Desbloquea un Soporte más Amplio de ECMAScript

Sencha Cmd y ExtGen 8.0.0 introducen un soporte ampliado del lenguaje ECMAScript hasta ES2025, lo que facilita el uso de características modernas de JavaScript como let, const y funciones flecha en Sencha Ext JS. Las mejoras del compilador, incluida la actualización del análisis del Closure Compiler, ofrecen una mayor alineación con las especificaciones actuales de JavaScript y una mayor confiabilidad en las compilaciones. 

Los desarrolladores pueden modernizar sus bases de código más rápido utilizando la última sintaxis y las API de JavaScript junto con herramientas contemporáneas, pasando menos tiempo persiguiendo problemas de compilación mientras entregan aplicaciones Ext JS más limpias y preparadas para el futuro sin la necesidad de polyfills y con menos código repetitivo.

Panel de Firma Digital Responsivo

Un nuevo componente adicional para la captura de firmas suave y responsiva estará disponible para ambos toolkits. Construido ampliando los componentes nativos de Ext JS, el Panel de Firma (Signature Pad) se integra perfectamente con contenedores Grid, Form o Panel y es totalmente compatible con las configuraciones, eventos, métodos, propiedades y tematización de Ext JS a través de variables y mixins. 

El componente incluye un rico conjunto de características: funcionalidad de Deshacer/Rehacer, acción de Limpiar, Ancho y Tamaño de Pluma configurables, selección de Color de Fondo, Selector de Color y múltiples formatos de exportación, incluidos JPG, PNG y SVG. Los marcadores de posición de Vista Previa, Título y Firma completan la experiencia.

También describiremos los pasos para auto-actualizar la biblioteca del Panel de Firma para acceder a las últimas funciones y garantizar actualizaciones futuras más fluidas.

Lector y Generador de Códigos QR

Ext JS introducirá un potente componente de Lector y Generador de Códigos QR para los toolkits Modern y Classic. Este componente permite a los desarrolladores generar y leer fácilmente códigos QR directamente dentro de sus aplicaciones, admitiendo una variedad de casos de uso como pagos, intercambio de datos, intercambio de contactos y más. 

El componente expone una API completa para generar y leer códigos QR con soporte para URLs, texto, VCARD/MeCard, eventos de calendario, geolocalización, teléfono y SMS, correo electrónico, configuraciones de Wi-Fi y datos de pago. Las opciones de renderizado incluyen SVG, Canvas y PNG, con la capacidad de descargar como imagen, copiar datos al portapapeles y previsualizar antes de guardar. 

Las opciones de personalización permiten colores de primer plano y fondo personalizados, control de tamaño flexible, interfaz de usuario responsiva para computadoras de escritorio y dispositivos móviles, y limpieza de entradas (sanitization) para mayor seguridad.

Renderizador en Búfer con Almacenamiento en Búfer Horizontal

El Modern Toolkit incluirá un renderizado de cuadrícula mejorado con virtualización de columnas para grandes conjuntos de datos. Esta mejora renderiza solo las celdas visibles más una zona de búfer configurable, lo que aumenta enormemente el rendimiento para cuadrículas con más de 1000 columnas. 

El renderizado de columnas en búfer funciona a la perfección con el bloqueo de filas y columnas, agrupación, filtrado, edición, funciones de accesibilidad, soporte RTL (derecha a izquierda) y todos los temas. Un desplazador (scroller) mejorado maneja cuadrículas muy anchas de manera eficiente.

Nuevo Plugin de Cuadrícula Bloqueable para Modern Toolkit

Ext JS 8.0 incluirá un nuevo plugin de Cuadrícula Bloqueable (Lockable Grid) para el Modern Toolkit que proporciona una funcionalidad completa de cuadrícula bloqueable. Este plugin está diseñado para ser fácil de usar, fácil de configurar y admite personalizaciones flexibles.

El plugin implementa un comportamiento de bloqueo y desbloqueo de columnas de forma nativa en la Cuadrícula Moderna, con desplazamiento horizontal y vertical sincronizado entre las regiones bloqueadas y normales. Mantiene total compatibilidad de funciones con modelos de selección, edición de celdas, resúmenes y otras capacidades de la cuadrícula.

Soporte para Font Awesome 7

Ext JS 8.0 incluirá Font Awesome 7.x como el conjunto de iconos predeterminado para los toolkits Modern y Classic. Esta actualización garantiza que tus aplicaciones tengan acceso a la última iconografía mientras mantiene total compatibilidad con las configuraciones de FA5 existentes. 

El framework se alinea con la hoja de trucos oficial del sitio web de FA7 para un uso consistente, y nuestra documentación incluye una guía completa para que los desarrolladores aprovechen el nuevo conjunto de iconos de manera efectiva.

Control de Límites de Diálogo

Ext.Dialog admite operaciones de maximizar, minimizar y arrastrar conscientes de los límites. Los cuadros de diálogo pueden respetar los límites de su contenedor o panel principal en lugar de tomar por defecto la ventana gráfica completa (viewport). 

Se ha añadido un nuevo valor owner a las configuraciones constrainDrag y maximizable, permitiendo a los desarrolladores restringir el comportamiento del diálogo a los límites de su componente propietario. Aunque los diálogos sean flotantes, respetan adecuadamente los límites del contenedor principal cuando se maximizan, minimizan o arrastran.

Accesibilidad: Soporte ARIA para Campos

El Modern Toolkit incluirá soporte ARIA completo para campos de formulario y disparadores (triggers). Las propiedades y roles ARIA adecuados se aplican durante el renderizado, asegurando la compatibilidad con lectores de pantalla, incluidos JAWS, Narrator, TalkBack y VoiceOver. 

Esta mejora es parte de nuestro compromiso continuo de hacer que las aplicaciones Ext JS sean accesibles para todos los usuarios.

Casilla de Verificación de Tres Estados para TreePanel

Las casillas de verificación (checkboxes) del TreePanel en el Classic Toolkit admitirán un comportamiento de tres estados: marcado, desmarcado e indeterminado. Los nodos principales reflejan automáticamente el estado colectivo de sus hijos, coincidiendo con los patrones de Material Design y las expectativas de accesibilidad. 

Habilitar esta función requiere un esfuerzo mínimo del desarrollador: simplemente establece enableTri: true en tu configuración sin necesidad de cambios en los eventos.

ReExt 1.2

ReExt proporciona un puente entre React y el potente framework Ext JS, lo que permite a los desarrolladores aprovechar la extensa biblioteca de más de 140 componentes de interfaz de usuario de Ext JS para crear aplicaciones web robustas y de alto rendimiento. Estos incluyen una potente cuadrícula de datos, árboles, gráficos, calendarios, D3 y más. ReExt 1.2 admitirá Ext JS 8.0.

Soporte de Versiones

Ext JS 8.0 será compatible con Sencha Upgrade Advisor v8.0, Sencha Architect v4.3.8, Sencha Themer v1.4.6, ReExt 1.2.0 y Rapid Ext JS 1.2.0.

Resumen

Ext JS 8.0 introducirá una gama de nuevas capacidades diseñadas para mejorar el rendimiento, la accesibilidad y la productividad de los desarrolladores en las aplicaciones empresariales modernas.

Si estás planeando una actualización o te gustaría entender cómo Ext JS 8.0 encaja en tu hoja de ruta de desarrollo, conéctate con tu Gerente de Cuenta de Sencha para discutir la planificación de la actualización, las opciones de licencia y los plazos.