Ext JS 8.0的新特性

Posted 周五, 03/27/2026 - 15:19 by admin

无缝解锁一系列现代化升级和新功能

我们很高兴预览 Ext JS 8.0，它为 Modern 和 Classic 工具包引入了一套全面的新功能、增强功能和组件。

在深入了解新功能之前，有必要先明确 Ext JS 的主版本号的含义。主版本号并不意味着会有重大的破坏性变更或强制重写应用程序。我们的版本控制遵循持续演进模型：
7.1 → 7.9：渐进式改进
8.0 → 8.9 → 9.x：持续演进，从先前版本无缝升级
我们积极减少破坏性变更，并优先考虑向后兼容性。Ext JS 8.0 旨在为现有应用程序提供平滑升级，仅在必要时进行少量调整。主要版本标志着路线图上的里程碑，无需重写代码库。此次更新将在可访问性、富媒体组件和网格性能方面带来显著改进，使 Ext JS 在企业应用开发方面比以往任何时候都更加强大和灵活。在本篇博客中，我们将详细介绍 Ext JS 8.0 的主要新增功能和增强特性。

解锁更广泛的 ECMAScript 支持

Sencha Cmd 和 ExtGen 8.0.0引入了对 ECMAScript 语言的扩展支持，最高可达 ES2025，从而让 Sencha Ext JS 中更容易使用现代 JavaScript 特性，例如let、const和箭头函数。编译器方面的改进（包括升级的 Closure Compiler 解析）增强了与当前 JavaScript 规范的一致性，并提高了构建的可靠性。开发者可以使用最新的 JavaScript 语法和 API 以及现代工具更快地实现代码库现代化，减少解决构建问题的时间，同时交付更简洁、面向未来的 Ext JS 应用程序，无需 polyfill，并减少样板代码。

"language": {
   "js": {
       "input": "UNSTABLE", // New feature, accepts latest syntax for compiling
       "output": "ANY" // The following will accept syntax and disable the transpiler.
   }
}

响应式数字签名板

两个工具包都将推出一个全新的插件组件，用于实现流畅、响应迅速的签名采集。该签名板组件基于原生 Ext JS 组件扩展而来，可与 Grid、Form 或 Panel 容器无缝集成，并完全支持 Ext JS 的配置、事件、方法、属性以及通过变量和 mixin 实现的主题功能。该组件包含丰富的功能：撤销/重做功能、清除操作、可配置的笔尖粗细和大小、背景颜色选择、颜色选择器，以及多种导出格式，包括 JPG、PNG 和 SVG。预览、标题和签名占位符进一步完善了用户体验。

{
    xtype: 'signature',
    penColor: '#000',
    penStrokeWidth: 2,
    minStrokeRatio: 0.7,
    listeners: {
        beginStroke: function(cmp) {
            console.log('Signature beginStroke:', cmp);
        },
        endStroke: function(cmp) {
            console.log('Signature endStroke:', cmp);
        }
    }
}

我们还将概述自行升级签名板库的步骤，以便获取最新功能并确保未来升级更加顺利。

二维码阅读器和生成器

Ext JS 将为 Modern 和 Classic 工具包引入一个功能强大的二维码读取器和生成器组件。该组件使开发人员能够直接在应用程序中轻松生成和读取二维码，支持多种应用场景，例如支付、数据共享、联系人交换等等。该组件提供了一个全面的 API，用于生成和读取二维码，支持 URL、文本、VCARD/MeCard、日历事件、地理位置、电话号码和短信、电子邮件、Wi-Fi 配置以及支付数据。渲染选项包括 SVG、Canvas 和 PNG，并支持下载为图像、将数据复制到剪贴板以及在保存前预览。自定义选项允许自定义前景色和背景色、灵活的尺寸控制、适用于桌面和移动设备的响应式用户界面，以及用于安全的输入清理。

{
    xtype: 'qrcode',
    padding: 20,
    type: 'email',
    data: {
        email: 'test@test.com',
        subject: 'QR code generation example',
        body: 'QR code generated through Sencha'
    },
    listeners: {
        qrgenerated: function(QRCodeClassInstance, dataPassed) {
            console.log("QR Code Generated");
        }
    }
}

带水平缓冲的缓冲渲染器

Modern 工具包将包含改进的网格渲染功能，并针对大型数据集采用列虚拟化技术。这项增强功能仅渲染可见单元格以及一个可配置的缓冲区，从而显著提升包含 1000 列以上的网格的性能。缓冲式列渲染与行和列锁定、分组、筛选、编辑、辅助功能、RTL 支持以及所有主题无缝协作。增强型滚动条可高效处理超宽网格。

Ext.create('Ext.grid.Grid', {
    title: 'Simpsons',
    store: store,
    bufferedColumns: true, // Enable virtual column rendering
    columns: [
        { text: 'Name', dataIndex: 'name', width: 200 },
        { text: 'Email', dataIndex: 'email', width: 250 },
        { text: 'Phone', dataIndex: 'phone', width: 120 }
    ],
    height: 200,
    layout: 'fit',
    fullscreen: true
});

Modern Toolkit 的全新可锁定网格插件

Ext JS 8.0 将包含一个适用于 Modern 工具包的全新 Lockable Grid 插件，该插件提供完整的可锁定网格功能。此插件设计简洁易用、配置方便，并支持灵活的自定义。该插件在现代网格系统中原生实现了列锁定和解锁功能，并在锁定区域和正常区域之间同步进行水平和垂直滚动。它完全兼容选择模型、单元格编辑、汇总和其他网格功能。

{
    xtype: 'grid',
    plugins: [{
        type: 'lockable'
    }],
    store: myStore,
    columns: [{
        text: 'ID',
        dataIndex: 'id',
        locked: true
    }, {
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email'
    }]
}

Font Awesome 7 支持

Ext JS 8.0 将把 Font Awesome 7.x 作为 Modern 和 Classic 工具包的默认图标集。此次升级确保您的应用程序能够使用最新的图标，同时保持与现有 FA5 配置的完全向后兼容性。该框架与官方 FA7 网站的速查表保持一致，以确保使用一致，我们的文档包含有关开发人员如何有效利用新图标集的全面指导。

// Using FA7 icons in your components
{	
    xtype: 'button',
    iconCls: 'fa-solid fa-rocket',
    text: 'Launch'
}

对话边界控制

Ext.Dialog 支持边界感知的最大化、最小化和拖动操作。对话框可以遵循其父容器或面板的边界，而不是默认占据整个视口。 constrainDrag和maximizable配置项中都新增了owner值，开发者可以将对话框的行为限制在其所属组件的边界内。即使对话框是浮动的，在最大化、最小化或拖动时，它们也能正确地遵循父容器的边界。

Ext.create({
    xtype: 'panel',
    title: 'Parent Container',
    width: 600,
    height: 400,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'dialog',
        title: 'Dialog',
        closable: true,
        modal: false,
        constrainDrag: 'owner',
        maximizable: 'owner',
        bodyPadding: 30,
        maxWidth: 300,
        html: 'This dialog respects its parent container boundaries.'
    }]
});

辅助功能：ARIA 对字段的支持

Modern 工具包将包含对表单字段和触发器的完整 ARIA 支持。渲染期间会应用正确的 ARIA 属性和角色，从而确保与包括 JAWS、Narrator、TalkBack 和 VoiceOver 在内的屏幕阅读器兼容。这项改进是我们持续致力于让所有用户都能访问 Ext JS 应用程序的一部分。

树状面板的三态复选框

经典工具包中的 TreePanel 复选框将支持三种状态：选中、未选中和未确定。父节点会自动反映其子节点的整体状态，符合 Material Design 设计规范和辅助功能要求。启用此功能只需开发人员付出极少的努力——只需在配置中设置enableTri: true，无需更改任何事件。

Ext.create('Ext.tree.Panel', {
    title: 'Tri-State Tree Example',
    width: 400,
    height: 300,
    rootVisible: false,
    renderTo: Ext.getBody(),
    enableTri: true,
    checkable: true,
    checkOnTriTap: false,
    store: {
        root: {
            expanded: true,
            children: [{
                text: 'Parent Node',
                expanded: true,
                children: [
                    { text: 'Child 1', leaf: true, checked: true },
                    { text: 'Child 2', leaf: true, checked: false }
                ]
            }]
        }
    }
});