What’s Coming in Ext JS 8.0

Unlock a Suite of Modern Upgrades & New Capabilities Seamlessly

We’re excited to preview Ext JS 8.0, which introduces a comprehensive set of new features, enhancements, and components across both the Modern and Classic toolkits.

Our Commitment to Seamless Upgrades

Before diving into new features, it’s important to clarify what a major version of Ext JS means. A major version does not imply large breaking changes or forced application rewrites. Our versioning follows a continuous evolution model:

• 7.1 → 7.9: Incremental improvements
• 8.0 → 8.9 → 9.x: Ongoing evolution, seamless upgrades from previous versions

We actively minimize breaking changes and prioritize backward compatibility. Ext JS 8.0 is designed to be a smooth upgrade for existing applications, with only minor adjustments where necessary. Major versions mark roadmap milestones—not a need to rewrite your codebase.

This update will introduce notable improvements in accessibility, rich media components, and grid performance, making Ext JS more powerful and flexible than ever for enterprise application development. In this blog, we walk through the key additions and enhancements coming in Ext JS 8.0.

Unlock broader ECMAScript support

Sencha Cmd and ExtGen 8.0.0 introduce expanded ECMAScript language support up to ES2025, making it easier to use modern JavaScript features such as let, const, and arrow functions in Sencha Ext JS. Compiler improvements—including upgraded Closure Compiler parsing—deliver stronger alignment with current JavaScript specifications and more consistent build reliability.

Developers can modernize their codebases faster using the latest JavaScript syntax and APIs alongside contemporary tooling, spending less time chasing build issues while delivering cleaner, future-proof Ext JS applications without the need for polyfills and with reduced boilerplate.

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

Responsive Digital Signature Pad

A brand-new addon component for smooth, responsive signature capture will be 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 will also outline steps for self-upgrading the Signature Pad library to access the latest features and ensure smoother future upgrades.

QR Code Reader & Generator

Ext JS will introduce a powerful QR Code Reader and Generator component 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 an image, copy data to the 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: 'test@test.com',
        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 will include 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

Ext JS 8.0 will include 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 will include Font Awesome 7.x as the default icon set for both Modern and Classic toolkits. This upgrade ensures your applications have access to the latest iconography while maintaining full backward compatibility with existing FA5 configurations.

The framework 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 supports boundary-aware maximize, minimize, and drag operations. Dialogs can 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 will include 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 will 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 build robust, high-performance web applications. These include a powerful data grid, trees, charts, calendars, D3, and more. ReExt 1.2 will support Ext JS 8.0.

Version Support

Ext JS 8.0 will be supported in Sencha Upgrade Advisor v8.0, Sencha Architect v4.3.8, Sencha Themer v1.4.6, ReExt 1.2.0, and Rapid Ext JS 1.2.0.

Summing Up

Ext JS 8.0 will introduce a range of new capabilities designed to improve performance, accessibility, and developer productivity across modern enterprise applications.
If you are planning an upgrade or would like to understand how Ext JS 8.0 fits into your development roadmap, please connect with your Sencha Account Manager to discuss upgrade planning, licensing options, and timelines.