Ext JS 6.x to Ext JS 8.0: Technical Upgrade Guide

This guide covers the technical steps for upgrading Ext JS 6.x applications to 8.0. Upgrading across multiple major versions requires planning and testing, as API changes, deprecations, and behavioral modifications have accumulated across the 6.x → 7.x → 8.0 progression.

What’s New in Ext JS 8.0

Enterprise Components

• Digital Signature Pad component (Modern and Classic)
• QR Code Reader and Generator (Modern and Classic)
• Font Awesome 7 as default icon library (backward compatible with Font Awesome 5 configurations)

Modern Toolkit

• Lockable Grid plugin
• Horizontal buffered rendering via bufferedColumns
• Enhanced dialog boundary controls
• Improved ARIA support for form fields and triggers

Classic Toolkit

• Tri-state checkboxes for TreePanel

Run Upgrade Adviser first—spot issues early and start your Ext JS 8.0 upgrade now.Start your upgrade now

Pre-Upgrade Preparation

Backup and Version Control

Before making changes:

• Create a tagged release or branch snapshot
• Create a dedicated upgrade branch
• Document current versions: Ext JS, Sencha Cmd, Node.js, Java
• Verify you can rollback if needed

Run Upgrade Adviser First

Download and run the Ext JS Upgrade Adviser before changing framework versions.

The Upgrade Adviser is a free static analysis tool that scans your codebase and generates a report identifying:

• Removed methods
• Private API usage
• Deprecated methods
• Changed configs and properties

How it works:

• Uses a custom ESLint plugin for Ext JS
• Runs from command line or integrates into IDE
• Supports auto-fix for many issues when integrated into supported IDEs
• Works with ES6 code
• Supports Modern and Classic toolkits

Why run it first:

Running Upgrade Adviser before the framework upgrade gives you a concrete list of issues to address, helps estimate migration effort, and reduces debugging time during build and runtime testing.

Steps:

1. Download from https://www.sencha.com/products/extjs/upgradeadviser/
2. Install and run against your application code
3. Review the generated report
4. Fix or prioritize flagged issues before upgrading framework
5. For IDE integration, enable linting and auto-fix

Audit Component Overrides

Check all component overrides before upgrading.

Overrides are high-risk during major version upgrades because they depend on internal framework behavior. An override that worked in 6.x may be unnecessary, broken, or cause bugs in 8.0.

For each override, document:

• Target class
• Target method or config
• Why the override exists (bug workaround, added behavior, rendering change)
• Whether it touches private APIs

Then determine:

• Does 8.0 provide built-in support for this behavior?
• Was the original bug fixed?
• Did the method signature or internal behavior change?

Remove obsolete overrides. Test any overrides you keep after upgrade.

Review Release Notes

Read release notes for versions between your current version and 8.0:

• Ext JS 7.0
• Ext JS 7.1-7.9
• Ext JS 8.0

Focus on API changes, behavioral changes, theme updates, and issues affecting your overrides.

Verify Environment

Check compatibility:

• Java version for target Sencha Cmd
• Node.js version
• npm version
• IDE and extensions

Download Required Files

• Ext JS 8.0 framework distribution
• Sencha Cmd (compatible with 8.0)
• Upgrade Adviser (if not already downloaded)

Upgrade Strategy

Use a phased approach:

Phase 1: Analysis

• Run Upgrade Adviser
• Review override compatibility
• Identify high-risk areas (custom components, deprecated APIs)
• Estimate effort

Phase 2: Pilot Module

Select a representative subset:

• One grid-intensive view
• One form-intensive workflow
• Dialog components
• Common custom components

Upgrade and validate the pilot first to:

• Reduce risk
• Identify issues early
• Create validation checklist
• Estimate remaining effort

Phase 3: Full Upgrade

After pilot validation, extend to full application or workspace.

For complex applications, consider upgrading to 7.x first, stabilizing, then upgrading to 8.0.

Upgrade Procedure

Option A: Sencha Cmd Workflow

Step 1: Upgrade project metadata

    sencha upgrade

Address any warnings before proceeding.

Step 2: Upgrade framework reference

    sencha framework upgrade ext /path/to/ext-8.0.x

or

    sencha framework upgrade --key ext --source /path/to/ext-8.0.x

Step 3: Upgrade each application

Navigate to each app directory:

    sencha app upgrade

Repeat for each application in workspace.

Option B: npm Workflow

Update package.json to reference Ext JS 8.0:

    {
      "dependencies": {
        "@sencha/ext": "~8.0.0"
      }
    }

Then run:

    npm install

Verify:

• Correct Ext JS version installed in node_modules
• Build scripts point to correct framework location
• Sencha Cmd version (if used) is compatible with Ext JS 8.0

Step 4: Code Modifications

Based on Upgrade Adviser report and build errors, update:

• Deprecated API calls
• Component configurations
• Event handler signatures
• Layout configurations
• Theme and icon references
• Code using private APIs

Work systematically, testing each change.

Build and Validation

Build

    sencha app build development

Expect build errors initially. Use error messages with Upgrade Adviser report to guide fixes.

After development build succeeds:

    sencha app build production

Validation Checklist

Build and Launch

• Application builds without errors
• Application loads without console errors
• No visual layout breaks

Navigation

• Routes function correctly
• Browser back/forward work
• Deep links resolve

Core Components

• Grids render and scroll
• Forms validate and submit
• Trees expand/collapse
• Charts display data

User Workflows

• Critical workflows complete
• CRUD operations work
• Search and filtering work
• File uploads/downloads work

Styling

• Theme applies correctly
• Custom styles render
• Responsive behavior works

Performance

• Load times acceptable
• Large dataset operations perform adequately
• Memory usage stable

Post-Upgrade Verification

Re-test Overrides

Test every override you kept, especially those affecting:

• Rendering
• Layout
• Event dispatch
• Store/model behavior
• Component lifecycle

These may load without errors but fail behaviorally at runtime.

Font Awesome 7 Compatibility

Verify icon rendering:

• Toolbar icons
• Menu icons
• Grid action column icons
• Tree icons
• Custom icon configurations

Update icon class names or glyph mappings if needed.

Grid Validation

Test grid features:

• Locking, grouping, filtering
• Inline editing
• Custom renderers
• Cell editing
• Export/print (if used)
• Large dataset performance

For Modern toolkit with wide grids, consider bufferedColumns.

Form Validation

Test:

• Field validation rules
• Required field indicators
• Date pickers
• Combo boxes and multi-select
• Custom validators
• Form submission and data binding

Toolkit-Specific Testing

Modern Toolkit:

• Touch/gesture interactions
• Responsive breakpoints
• Dialog drag and maximize
• Keyboard navigation
• ARIA attributes
• Mobile device compatibility

Classic Toolkit:

• Desktop interactions
• Window management
• Menus and toolbars
• Keyboard shortcuts
• TreePanel checkbox behavior (including tri-state)

Data Layer

Test:

• Store loading and filtering
• Model associations
• Proxy configurations
• Data binding
• Paging and buffering

Common Issues

Deprecated APIs

Symptoms: Build or runtime errors for removed methods/properties

Fix: Consult Upgrade Adviser report, review API docs, update to current equivalents

Layout Issues

Symptoms: Incorrect component positioning

Fix: Review layout configs, check for deprecated layout types, update flex/sizing, test various container sizes

Event Handler Changes

Symptoms: Handlers not firing or receiving wrong parameters

Fix: Review event docs, update handler signatures, verify event names, check bubbling behavior

Theme Issues

Symptoms: Broken or inconsistent visual appearance

Fix: Rebuild theme, update theme variables, check Font Awesome 7 conflicts, verify SASS compiles

Build Configuration Issues

Symptoms: Build process fails

Fix: Review app.json for deprecated properties, update build profiles, check package dependencies

Testing Strategy

Unit Testing: Components in isolation, model/store logic, utility functions
Integration Testing: Component interactions, data flow, workflow completion
User Acceptance Testing: Critical workflows, acceptance criteria, document behavioral changes
Performance Testing: Baseline before upgrade, compare after, address regressions
Browser Compatibility: Test all supported browsers & mobile devices and check for browser-specific issues

For additional resources, visit:

Sencha Support Portal: Access documentation, downloads, and support tickets
Ext JS Upgrade Adviser: Free tool to identify code changes required for migration
Sencha Discord Server: Connect with community experts and Sencha developers

FAQ

Q: Direct upgrade or through 7.x?

A: For complex applications, upgrade to 7.x first, stabilize, then to 8.0. For simpler apps, direct upgrade may work after Upgrade Adviser analysis.

Q: How long does upgrade take?

A: Varies by complexity. Small apps: weeks. Large, customized apps: months. Upgrade Adviser helps estimate.

Q: What if components no longer work?

A: Check release notes and migration guides. Contact Sencha Support with specifics. Use community forums and Discord.

Q: Can we maintain both versions during transition?

A: Yes, using separate branches for parallel development and a safety net.

Q: Are there automated migration tools?

A: Upgrade Adviser identifies issues but code modifications are manual. Some find-and-replace may be automated with careful testing.

Q: What about third-party extensions?

A: Contact vendors to confirm 8.0 compatibility. Some may need updates or may not be compatible.

Conclusion

Upgrading from 6.x to 8.0 requires planning, testing, and systematic execution. Key steps: run Upgrade Adviser first; audit overrides before changing framework versions; upgrade in phases with a pilot-first approach; and validate thoroughly. This structured approach reduces risk and helps modernize your application to leverage 8.0 capabilities.