Upgrading to Ext JS 5 in five easy steps!

Historically, the upgrade path between different versions of Sencha Ext JS has been challenging for developers and product managers alike. Much to the chagrin of project managers everywhere, migrating apps from Ext JS 3 to Ext JS 4 typically required major refactoring, frequently necessitating a complete rewrite. The complaints of the IT community were clearly heard loud and clear by Sencha which, I’m happy to report, has actually made the Ext 4 to Ext 5 upgrade path nearly seamless.

Top 5 reasons for upgrading to Ext JS 5

  1. New Components
    Ext 5 adds support for a drag & drop dashboard component, an improved combo box with tag selector, and grid widgets.


    Ext JS 5 Grid Widgets

  2. A new charting package based on SVG and Canvas
    The new charting engine is going to be shared with Sencha Touch. It’s a lot simpler for developers to add additional sprites to the drawing layer and floating axis and more complex user interactions are now supported. Sencha has also cleaned up some of the chart config properties (e.g. axis types are now all lower-case) to make it more consistent across the framework. Since the charts are now SVG/Canvas based, client-side methods have been added that enable a user to download the generated chart as a bitmap. You won’t have to rely on the Sencha.io cloud service anymore to convert vectors into bitmaps.


    Ext JS 5 chart with added custom sprites

  3. Viewmodels and Bi-Directional Data Binding
    You now have the option of using an Model-View-ViewModel (MVVM) architecture instead of the Ext 4.x MVC framework. MVVM enables you to use views expressly for layout while compartmentalizing event handling into a separate, view-specific file. ViewModels enable you to easily implement bi-directional databinding with your views, which significantly cuts down on the amount of code that you’ll need to write (and debug!).

    Combining MVVM with MVC

    Combining MVVM with MVC

  4. Chained Stores and other Improvements to the Data Package
    Most apps are going to require multiple views of the same data store. For instance, you might want to simultaneously output two grids that refer to the same core dataset but have different client-side filters applied to them. In Ext 4 this typically required the instantiation of two separate stores and the duplication of records in memory. Chained stores are analogous database table views.  They link back to a single  “source” store containing your records. The chained store’s  filters, sorters and groupers are defined independently of the data “source” Any updates to the source store automatically triggers a refresh in its associated chained stores.
  5. Tablet Compatibility
    I saved the best for last. Ext JS 5 now supports touch gestures (pinch, rotate, longpress, etc) and comes bundled with two touch-compatible themes – “Crisp” and “Neptune Touch.”  You’ll likely need to make some slight changes to your layouts after applying these themes, however, in most cases you should be able to support both desktop and tablet browsers from a single codebase.


    Using the “Crisp” touch-compatible theme

Upgrading to Ext JS 5 in Five Easy Steps

During this tutorial, you’ll upgrade the Congressional Spending Portal – an app that I had initially developed using Sencha Architect in Ext JS 4.1.

Upgrade this app from Ext 4 to Ext 5 in five easy steps!

Upgrade this app from Ext 4 to Ext 5 in five easy steps!Download the tutorial assets

Before you begin

Step 1: Create a Sencha Command Project

Open a command prompt to /extjs5upgrade/ and enter the following statement:

sencha generate app -ext SpendingPortal spendingportal

Note that Sencha Command will automatically download and install the latest version of Ext 5 from the CDN! Cool!

Step 2: Copy the Ext 4 classes into the Ext 5 project

  1. Delete the controller, model, store, and view folders from /extjs5upgrade/spendingportal/app
  2. Copy /extjs5upgrade/before/app/*.* to /extjs5upgrade/spendingportal/app
  3. Copy /extjs5upgrade/before/app.js to /extjs5upgrade/spendingportal/app/Application.js

Step 3: Tweak the Application.js file

Refactor the /extjs5upgrade/spendingportal/app/Application.js file to resemble the following:

Ext.define('SpendingPortal.Application', {
    extend: 'Ext.app.Application',
    name: 'SpendingPortal',
    controllers: [

    launch: function () {
        // TODO - Launch the application

        var pnl = Ext.ComponentQuery.query('#centerpanel')[0];

        Ext.widget('sponsors', {
            constrainTo: pnl.getEl(),
            x: 5,
            y: 20

        Ext.widget('earmarksviewer', {
            constrainTo: pnl.getEl(),
            x: 500,
            y: 20

        Ext.widget('sponsorchart', {
            constrainTo: pnl.getEl(),
            x: 500,
            y: 300

Tweak the /extjs5upgrade/spendingportal/app.js file to set autoCreateViewport to true.

    name: 'SpendingPortal',
    extend: 'SpendingPortal.Application',
    autoCreateViewport: true

Step 4: Invoke Ext 4 Compatibility mode

Open the app/app.json file and add the following code to enable “compatibility” mode:

"compatibility" : {
        "ext" : "4.2"

Modify the requires[] property in the app/app.json file to load the Ext 4 charting package:

"requires": [

Step 5: Add Tablet Support

Modify the theme property in the /extjs5upgrade/spendingportal/app/app.json file to resemble the following:

"theme": "ext-theme-crisp"

Test the App!

Return to your command prompt and change directories to /extjs5upgrade/spendingportal. Then issue the following command to update the bootstrap.json file which indicates the classes to be loaded:

sencha app refresh

Then tell Sencha Command to create a build and make it accessible via http (Sencha Command has a built-in webserver):

sencha app watch

Test the app in your browser by accessing the URL generated by Sencha command (typically http://localhost:1841).

Now wasn’t that easy?

Congrats! Now that you’ve gotten the app up and running on Ext 5, you can start to improve upon it by invoking the broad range of new features (including Sencha Charts!) that have been added to the framework. Check back here often to learn about new Ext 5 tips, traps, and techniques. And consider engaging Fig Leaf Software for your Sencha consulting and training needs!

2 thoughts on “Upgrading to Ext JS 5 in five easy steps!

  1. Pingback: Ext JS 5 にアップグレードする 5つの簡単なステップ | 株式会社ゼノフィ

  2. chaithra

    I m trying to follow the above steps but i m stuck in the step 1.. after entering the cmd in cmd prompt.. i m getting this error ‘invalid primary package signature’.. pls help me through this


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s