Upgrading 7.x Sencha Architect App to Ext JS 7.6

On August 31, 2022, Sencha released Ext JS 7.6 and Sencha Architect 4.3.2 (referred to as SA hereafter).  Numerous SA users are looking forward to a way to upgrade their applications to the latest version of the framework and SA.

In this guide, I will show you how to manually upgrade your Ext JS 7.x application built with Sencha Architect 4.2.9 to Ext JS 7.6, recently released. Then you can use Sencha Architect 4.3.2 that supports only Ext JS 7.6.

Before Upgrading the Application

Before upgrading your application, it is essential and recommended to backup your project and read some documentation pages to know what’s new in the latest Ext JS version. Doing this lets you make a better decision and know in depth what you are about to work on.

Please see what is new from the latest 3 versions:

• What’s new in Ext JS 7.4
• What’s new in Ext JS 7.5
• What’s new in Ext JS 7.6

Now that you know about the updates, let’s get started!

If you are a long-time Sencha Architect user, maybe you are unfamiliar with using Sencha Cmd to do some tasks. In this case, we will do the normal process to upgrade an Ext JS application, which is how SA does in the background.

Maybe it is a good opportunity to know how the upgrade process works in Sencha Cmd; please refer to these 2 guides.

• https://docs.sencha.com/cmd/7.6.0/guides/cmd_upgrade.html
• https://docs.sencha.com/cmd/7.6.0/guides/cli_reference.html#cli_reference_-_sencha_framework

Preparing to upgrade manually 

From the Support Portal:

• Download Ext 7.6 and extract the Ext JS framework zip file to your disk
• Download and Install Sencha Cmd 7.6.0
• Download and install Sencha Architect 4.3.2

Now that you have Cmd Installed and Ext JS 7.6 extracted to your disk, let’s upgrade the Ext JS application by running this command in Sencha Cmd.

Open your terminal and run;

sencha app upgrade [ path-to-new-framework ]

or

sencha framework upgrade --key ext --source C:\Users\your_user\Downloads\ext-7.6.0

So simple, right? Your application is already upgraded. Now we need to do some edits on our .xds file to make sure Sencha Architect 4.3.2 will successfully open our application. 

In the root directory of your Sencha Architect project, open the .xds file using any text/code editor of your preference; this file should have your project name (ex. MyApp.xds).

Change the “cmd” object directive to match the Ext JS full version you have just downloaded. In this case, I have changed cmdVersion to 7.6.0.87 and frameworkVersion to 7.6.0.41

• In this same .xds file, search for the xdsVersion and xdsBuild directives and change to the Sencha Architect version and build you have installed.

• You must also change the framework directive to match the Ext JS 7.6 version. If your application uses Classic Toolkit, you will need to change to ext76, or if your application uses Modern Toolkit, you will need to change to modern76.

Done?

Yes, it’s done! you have manually upgraded your application to the latest Ext JS version and made it SA 4.3.2 compatible as well.

Now, drink a coffee and enjoy; you can open Sencha Architect and have your application project running.

What is next?

Sencha Architect is going to stay and will receive continued updates. As part of the 7.6 release, Sencha Architect 4.3.2 has support for a single version of Ext JS 7.6. Sencha team is gearing up to provide support for on-demand downloading and all the previous versions of Ext JS 7.6 and providing support to MAC M1 & M2 versions.

*Features are not committed until completed and GA released.

Need help to Upgrade to 7.6?

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 to 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 MVP’s are there.
• Sencha developers are there.
• Expand awareness of Sencha products
• Community Engagement and Contributions
• And more…