Ext JS 8.0 版本已发布

Posted 周二, 04/14/2026 - 11:32 by admin

Ext JS 8.0 版本已发布。
我们很高兴地宣布 Sencha Ext JS 8.0 正式发布——这是一个重大版本，它为我们行业领先的 JavaScript 框架带来了现代化的增强功能、改进的性能和新的功能，并预集成了 140 多个 UI 组件。

此版本发布了客户一直以来期待的功能——内置签名采集、二维码工作流程、用于处理海量数据集的更快网格，以及所有工具包中对现代图标的支持。所有功能均完全向下兼容，无需重写代码。主要版本更新并不意味着会有大规模的重大变更，也不需要重写应用程序。以下是所有新增功能及其对您的应用程序的影响。

下载免费试用版

进一步增强一流的 Ext JS 数据网格仍然是现代应用程序的基石，在 Ext JS 8.0 中，我们显著提高了网格的性能和功能。

Ext JS 8.0 亮点

此版本提供了 Sencha Upvote 列表中用户最希望看到的功能，同时保持了向后兼容性，可实现无缝升级。

使用全新的响应式数字签名板（经典和现代工具包），直接在您的应用程序中签署文档。
使用全新的二维码阅读器和生成器（经典和现代工具包），在支付、零售和物流领域实现二维码工作流程。
通过 Font Awesome 7 获取最新图标——完全向下兼容 FA5。
利用增强的网格性能和水平缓冲（现代工具包）更快地渲染大型、宽数据集
使用新的可锁定网格插件（Modern Toolkit）固定报表样式视图中的列
使用扩展的ECMAScript 支持（最高至 ES2025），自信地编写现代 JavaScript。
利用ARIA 无障碍支持（现代工具包）构建更具包容性的应用程序
将 ReExt 与最新的 Ext JS 配合使用——ReExt 1.2现在完全支持 Ext JS 8.0。

Sencha Cmd 和 ExtGen 8.0.0 通过 ES2025 扩展了 ECMAScript 支持，使团队能够在 Ext JS 应用程序中更广泛地采用现代 JavaScript 特性，例如let、const和箭头函数。编译器增强功能，包括更新的 Closure Compiler 解析，提高了与当前 JavaScript 标准的兼容性，并有助于构建更可靠的代码。这些更新有助于团队更高效地实现代码库现代化，减少对 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。预览、标题和签名占位符进一步完善了用户体验。现在，构建审批工作流程、入职表单、合规性签字或现场服务应用程序的团队可以直接在 Ext JS 应用程序中捕获和导出签名（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 工具包。该组件使开发人员能够直接在应用程序中轻松生成和读取二维码，支持多种应用场景，例如支付、数据共享、联系人交换等等。常见用例包括零售业的付款确认、物流和运输业的资产跟踪、活动中的联系人共享、Wi-Fi 配置和日历邀请——所有这些都可以在您的 Ext JS 应用程序内部原生处理，而无需外部依赖项。该组件提供了一个全面的 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");
            }
        }
    }

准备好亲眼见证这些功能的实际应用了吗？

下载 Ext JS 8.0 免费试用版，探索 KitchenSink 中的每个新组件。
开始免费试用
查看 KitchenSink 示例

带水平缓冲的缓冲渲染器

渲染 1000 多列而不影响性能。 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 的全新可锁定网格插件

为报表样式视图锁定列——现在 Modern 工具包中已原生支持此功能。我们为 Modern 工具包推出了一款全新的可锁定网格插件，它提供完整的可锁定网格功能。这款插件设计简洁易用、配置方便，并支持灵活的自定义功能。该插件在现代网格系统中原生实现了列锁定和解锁功能，并在锁定区域和正常区域之间同步进行水平和垂直滚动。它完全兼容选择模型、单元格编辑、汇总和其他网格功能。

    {
        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 支持

所有工具包均采用最新图标——FA5 配置无任何破坏性更改。 Ext JS 8.0 现在默认使用Font Awesome 7.x作为 Modern 和 Classic 工具包的图标集。该框架现已与 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 应用程序的一部分。

树状面板的三态复选框

更智能的树形选择，与 Material Design 风格完美契合——只需一行配置即可启用。经典工具包中的 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 }
                    ]
                }]
            }
        }
    });