What’s New in Ext JS 8.0

Unlock Suite of Modern Upgrades & New Capabilities Seamlessly

Ext JS 8.0 introduces a broad set of enhancements and new capabilities across both the Modern and Classic toolkits, with a strong focus on platform continuity, modernization, accessibility, rich media and grid performance.

Our Commitment to Seamless Upgrades

Ext JS 8.0 should not be viewed as a disruptive release. A major version does not signal large-scale breaking changes or require application rewrites.

Our versioning reflects a model of continuous evolution:

• 7.1 → 7.9: incremental improvements
• 8.0 → 8.9 → 9.x: ongoing evolution with a clear upgrade path

Backward compatibility remains a priority. Ext JS 8.0 is designed to support straightforward upgrades for existing applications, typically requiring only limited adjustments where needed. Major releases represent important product milestones, not a reset of your codebase.

This release delivers meaningful advances in accessibility, rich media components, and grid performance, further strengthening Ext JS as a platform for enterprise application development.

In this overview, we highlight the key additions and enhancements introduced in Ext JS 8.0.

Unlock broader ECMAScript support

Sencha Cmd and ExtGen 8.0.0 extend ECMAScript support through ES2025, enabling teams to adopt modern JavaScript features such as let, const, and arrow functions more broadly within Ext JS applications.

Compiler enhancements, including updated Closure Compiler parsing, improve alignment with current JavaScript standards and contribute to more reliable builds. These updates help teams modernize codebases more efficiently, reduce reliance on polyfills, minimize boilerplate, and support cleaner long-term application architecture.

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

Please refer to the language transpiler documentation for further details

Responsive Digital Signature Pad

A brand-new addon component for smooth, responsive signature capture is now available for both toolkits. Built by extending native Ext JS components, the Signature Pad integrates seamlessly with Grid, Form, or Panel containers and fully supports Ext JS configs, events, methods, properties, and theming through variables and mixins.

The component includes a rich feature set: Undo/Redo functionality, Clear action, configurable Pen Width and Size, Background Color selection, Color Picker, and multiple export formats including JPG, PNG, and SVG. Preview, Title, and Signature placeholders round out the experience.

    {
        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);
            }
        }
    }

We’ve also outlined steps for self-upgrading the Signature Pad library to access the latest features and ensure smoother future upgrades.

QR Code Reader & Generator

Ext JS introduces a powerful QR Code Reader and Generator component available for both Modern and Classic toolkits. This component enables developers to easily generate and read QR codes directly within their applications, supporting a variety of use cases such as payments, data sharing, contact exchange, and more.

The component exposes a comprehensive API to generate and read QR codes with support for URLs, text, VCARD/MeCard, calendar events, geolocation, phone and SMS, email, Wi-Fi configurations, and payment data. Rendering options include SVG, Canvas, and PNG, with the ability to download as image, copy data to clipboard, and preview before saving.

Customization options allow for custom foreground and background colors, flexible size control, responsive UI for desktop and mobile, and input sanitization for security.

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

Buffered Renderer with Horizontal Buffering

The Modern toolkit now includes improved grid rendering with column virtualization for large datasets. This enhancement renders only visible cells plus a configurable buffer zone, greatly boosting performance for grids with 1000+ columns.

The buffered column rendering works seamlessly with row and column locking, grouping, filtering, editing, accessibility features, RTL support, and all themes. An enhanced scroller handles very wide grids efficiently.

    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
    });

New Lockable Grid Plugin for Modern Toolkit

We’re introducing a new Lockable Grid plugin for the Modern toolkit that provides full lockable grid functionality. This plugin is designed to be simple to use, easy to configure, and supports flexible customizations.

The plugin implements column locking and unlocking behavior natively in the Modern Grid, with synchronized horizontal and vertical scrolling between locked and normal regions. It maintains full feature compatibility with selection models, cell editing, summaries, and other grid capabilities.

    {
        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 Support

Ext JS 8.0 now ships with Font Awesome 7.x as the default icon set for both Modern and Classic toolkits. The framework now aligns with the official FA7 website cheat sheet for consistent usage, and our documentation includes comprehensive guidance for developers on leveraging the new icon set effectively.

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

Dialog Boundary Control

Ext.Dialog now supports boundary-aware maximize, minimize, and drag operations. Dialogs can now respect the boundaries of their parent container or panel rather than defaulting to the full viewport.

A new owner value has been added to both the constrainDrag and maximizable configurations, enabling developers to constrain dialog behavior to the bounds of its owner component. Even though dialogs are floated, they properly respect parent container boundaries when maximized, minimized, or dragged.

    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.'
        }]
    });

Accessibility: ARIA Support for Fields

The Modern toolkit now includes full ARIA support for form fields and triggers. Proper ARIA properties and roles are applied during render, ensuring compatibility with screen readers including JAWS, Narrator, TalkBack, and VoiceOver.

This enhancement is part of our ongoing commitment to making Ext JS applications accessible to all users.

Tri-State Checkbox for TreePanel

TreePanel checkboxes in the Classic toolkit now support tri-state behavior: checked, unchecked, and indeterminate. Parent nodes automatically reflect the collective state of their children, matching Material Design patterns and accessibility expectations.

Enabling this feature requires minimal developer effort – simply set enableTri: true in your configuration with no event changes necessary.

    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 }
                    ]
                }]
            }
        }
    });

ReExt 1.2

ReExt provides a bridge between React and the powerful Ext JS framework, allowing developers to leverage Ext JS’s extensive library of over 140 UI components to help users build robust, high-performance web applications. These include a powerful data grid, trees, charts, calendars, D3, and more. ReExt 1.2 now seamlessly supports the latest Ext JS version 8.0!

Version Support

Provided support for Ext JS 8.0 in Sencha Upgrade Advisor v8.0, Sencha Architect v4.3.8, and Sencha Themer v1.4.6, ReExt 1.2.0 and Rapid Ext JS 1.2.0. Please visit the Support Portal and download the latest versions.

Summing Up

As detailed above, Ext JS 8.0 introduces several significant new features and improvements and there is even more to explore. Be sure to check out our product change logs for a full list of updates. As always, we welcome your feedback – it plays a key role in helping us continuously improve our products.

View the change log documentation here:

• Ext JS
• CMD

Ready to check out the Ext JS 8.0 documentation?

For full details about this release, please see the change log and the What’s New guide:

We are working hard to serve our community better in all areas. Please do try out our new Ext JS 8.0:

Download Ext JS 30-day free trial
Getting Started Guides
Check out the updated Resource Center
KitchenSink examples

Be sure to follow us on Twitter and our YouTube Channel for updates. Until next time, let’s build great apps and happy coding.

Looking to Upgrade to 8.0?

The free-to-use Ext JS Upgrade Adviser tool helps identify code changes required to migrate to the latest Ext JS version. Give it a try!

Join the Sencha Discord Server

Are you looking for community engagement? Want to help, learn and share with many Ext JS experts? Join Sencha Discord Server now for free and be part of our community!

• Sencha MVPs are there
• Sencha developers are there
• Expand awareness of Sencha products
• Community Engagement and Contributions

And more…