Training Tip: Upgrading to Ext JS 6

November 19, 2015 104 Views

Ext JS 6 was released in July. You’re probably wondering how easy it will be to migrate your Ext JS 5 apps. The great news is that Ext JS 6 includes virtually everything that was in Ext JS 5.1 and Sencha Touch 2.4, so it’s usually very simple to upgrade your apps.

In this article, you’ll learn how to upgrade a sample Ext JS 5.1 or Sencha Touch 2.4 App to Ext JS 6. To get started, check out the excellent documentation and blog post that detail all of the new features:

Migrating Apps to Ext JS 6

There are three types of apps.

A classic app uses classic toolkit components
A modern app uses modern toolkit components
A universal app has both a classic user interface and a modern user interface

Both classic and modern apps use core classes such as record definitions, stores, controllers and view models. A universal app allows you to share the core classes with the classic and modern views.

Upgrading an Ext JS 5.1 Application

The first step in the upgrade process is to upgrade the “.sencha” folder and other key parts of your application. Run sencha app upgrade from your application root folder:

sencha app upgrade ../path/to/ext6

Alternatively, you can simply generate a classic starter app of the same name, and copy over the app folder (and Sass, if needed):

sencha -sdk path/to/ext6 generate app - classic MyClassicApp ../myclassicapp

The app.json file may need to be manually edited, including requires for packages and themes. The “ext-” and “sencha-” prefixes for various packages have been removed. This means that “sencha-charts” is now just “charts” and “ext-theme-neptune” is now simply “theme-neptune”.

For more about upgrading Ext JS, see the Ext JS 6 Upgrade Guide.

Upgrading a Sencha Touch 2.4 Application

To upgrade a Sencha Touch 2.4 app, you can run:

sencha app upgrade ../path/to/ext6

Or simply generate a modern starter app of the same name, and copy over the app folder (and Sass, if needed).

sencha -sdk path/to/ext6 generate app -modern MyModernApp ../mymodernapp

Once again, for upgrading to Ext JS 6, your entries in the app.json file may need to be manually edited. For more about upgrading Sencha Touch, see the Sencha Touch 2.4 to Ext JS 6 Upgrade Guide.

Changes Required for Sencha Touch Models

A modern Ext JS 6 app uses the common data package and other core packages. In the new core packages, models do not nest configs into a config block. Remove the config block surrounding configs such as proxy and fields as shown below.

Sample Sencha Touch Model:

Ext.define('MyApp.model.Person', {
    extend: 'Ext.data.Model',
    // config: {
        proxy: {
            type: 'ajax',
            url: 'resources/Data/json/marxBrothers.json'
        },
        fields: ['name', 'born', 'died']
    // }
});

For more details, see Sencha Touch 2.4 to Ext JS 6 Upgrade Guide.

Converting to a Universal Application

If you have an existing Ext JS 5.1 or Sencha Touch 2.4 app and want to turn it into a universal app, here are the general steps to follow.

1. Create a universal app using Sencha Cmd:

sencha -sdk path/to/ext6 generate app -starter=false MyUniveralApp ../myuniversalapp

The -starter=false param means the app infrastructure is created, but there will not be an app folder.

Move the old app folder contents to classic/src.

A universal app has three key folders:

app
classic/src
modern/src

The app folder holds shared code, such as models or view controllers. The classic and modern directories are structured like code packages. Their src folders are structured like any application, with model, store and view folders. They also have Sass directories.

2. Move your Ext JS 5.1 to classic app folders:

Copy the contents of app to classic/src
Copy the sass folder to classic
Copy the resources folder to myuniversalapp
Move classic/src/Application.js to the app folder

When coding universal applications, run sencha app refresh whenever you create, rename, move, or delete a source file.

The classpath in app.json is set to this:

"classpath": "app,${toolkit.name}/src"

Code in the classic part of your application can use classes in both app and classic/src. Similarly, the modern part of your app can use app and modern/src.

Classes in app can only use other classes in app.

You may want to share view models (VM) and view controllers (VC) between the classic and modern versions of your app. If everything applies to both classic and modern, simply leave them in app. If you want to share key portions of these files, then you can subclass the VC and VM.

For more information, read Using Both Shared and View-Specific Code in an Ext JS 6 Universal App.

3. Now add an initial modern view to your app:

The universal app needs a main modern view. Open a terminal window and navigate to myuniversalapp and run the following command:

sencha generate view -modern main.Main

This will create a main view, ViewController and ViewModel, all within the modern portion of your myuniversalapp application.

4. Run the new universal app:

You now have a new universal app that contains the same code as your classic app. Because you may have edited app.json, and also copied some Sass files, you need to build the app. Use a terminal window to navigate to your application and run:

sencha app build development

Then, in your browser, run:

myuniversalapp

It should run just like your Ext JS 5.1 app. You can also view the modern portion of the app. To run an application as a modern app, you can either:

In Chrome, use Developer Tools to turn on device emulation, then refresh.

Add ?modern to the URL, before the hash mark.

At this point, the modern portion of the app shows “Hello World!!” from the generated view. You can build modern toolkit UIs on top of your existing data models and controllers. Modern apps can also use view models, view controllers and binding. It’s not required, but you can take advantage of those features if you want.

Targeting Different Builds for Different Devices

With Ext JS 6 and Cmd 6, not only can you create an application that uses both toolkits, you can also deliver targeted views to specific devices such as: smartphones or desktops running IE8 or any device or browser in between. You can indicate which toolkits use which themes by omitting a toolkit key in your Cmd generated “app.json” and, instead, include a modified builds block.

"toolkit": "classic",  // or "modern"
"builds": {
    "classic": {
        "toolkit": "classic",
        "theme": "theme-triton"
    },
    "modern": {
        "toolkit": "modern",
        "theme": "theme-triton"
    }
}