What’s New in Ext JS 6.5 and Sencha Cmd 6.5 – Your Questions Answered

June 8, 2017 122 Views

Ext JS

In our recent webinar, What’s New in Sencha Ext JS 6.5 and Cmd 6.5 – watch it now, we presented some amazing new capabilities that were released in Ext JS 6.5 and Sencha Cmd 6.5. Using the Coworkee example application, we demonstrated how to use Ext JS 6.5 features to build powerful, data-intensive, cross-platform web applications. During the webinar, we conducted a survey to learn which Ext JS version attendees are currently using. We found out that, within 2 weeks of the Ext JS 6.5 launch, more than 10% of the attendees had already upgraded to use the exciting new capabilities. Below is the survey result from about 150 respondents who attended the webinar.

There were several intriguing questions that we didn’t get time to answer during webinar, so we’re sharing the answers below.

Ext JS 6.5

Are there any updates to Classic toolkit?

Ext JS 6.5 provides a number of improvements and features that apply to both Classic and Modern toolkits. These improvements include:

Charts now includes a Box Plot and a Navigator component. You can use the Navigator component to set the visible range of the x-axis of a cartesian chart. The new Box Plot chart is useful for displaying data from multiple data sets. Charts also gained a new “curve” config to make line smoothing more flexible.
The D3 Adapter has been upgraded to use D3 version 4 APIs. Also, we have added an Organization Chart visualization that works with hierarchical data.
For Pivot Grid, there is a tabular layout, similar to the Excel tabular form. You can now include widgets inside a Pivot Grid, which allows you to create better visualizations – for example, to show a ticker or rating component. Pivot Grid now also has additional configs to create collapsible rows and columns – making it even more compact and easier to read. With Ext JS 6.5, Exporter now supports exporting pivot table definitions, which means your users can now export the raw data and the Pivot Table natively into Microsoft Excel.
All the exciting Cmd 6.5 enhancements such as dynamic package loading, delivery of progressive web apps, and support for ECMAScript 2015 (ES6) can be used to build applications using Classic toolkit as well.

Will Classic Toolkit get any of the enhancements that Modern Toolkit received?

In general, there will be some features that will be Modern toolkit only. This decision will be made on a case-by-case basis depending on the complexity of the feature. While the emphasis of new development is on the Modern toolkit, the Classic toolkit will definitely gain functionality in future releases. At this time, the exact list of new features for Classic toolkit is still being considered, and it will evolve based on customer feedback and requests.

When starting a new project, which toolkit should I use?

Question details: We’re currently starting development of a completely new app – initially for desktop, but later we’ll add support for phones. What’s the recommended way of building this type of app that is the most future proof? Should we go for a universal app and create our initial desktop app with the Classic toolkit, or is a Modern toolkit only app the best approach from now on?

We recommend the Modern toolkit for most new projects, but there are several features in the Classic toolkit that would also make it the right choice. The following features are only available in Classic: locking grids, support for IE8 / 9 / 10, and accessibility and support for RTL (Right-to-left) languages. If your application needs these capabilities, then Classic is the way to go.

Does Modern toolkit include form validation that’s similar to vtypes in Classic toolkit?

Yes, the validation capabilities in the Modern toolkit are similar to vtypes. The validators config that’s available on form fields uses the Ext.data.validator.* family as validation algorithms. These can be extended with custom validators or a validation function can be provided instead.

What is the complexity of upgrading from Ext JS 6.2 to 6.5?

For Classic toolkit apps, the upgrade complexity should be minimal. For Modern toolkit apps, there are some breaking changes documented in the Ext JS 6.5 upgrade guide.

When will there be parity between Classic and Modern toolkits?

In Ext JS 7.0, the goal is to have the majority of Classic toolkit features supported in Modern toolkit.

Cmd 6.5

Can we use Classic toolkit with ES6/Typescript?

Yes, you can use Classic toolkit with ES6. We don’t provide direct support for TypeScript at this time, but you could look at our WebPack plugin for ExtReact, as an example of how to script this on your own.

Does support for ES6 work with Ext JS 6.2 and Sencha Cmd 6.5?

Yes, you can use ES6 with Ext JS 6.2 and Cmd 6.5.

Do production build packages load individually or in a single app.js file? In your demo of multi-package application files, are they loaded on “click of tab”?

The packages listed in app.json as “uses” will be built as separate JS / CSS resources. Using the package loader (Ext.Package.load), the application decides when to load these packages. See the MultiPackageDemo on GitHub for an example of dynamic package loading.

Does the “profiles” concept apply to packages too?

There are three possible scenarios:

If you’re working on build profiles in app.json, then yes, these are used to build any “uses”-based packages as resources for that build profile.
If you’re working on build profiles in package.json, then no, these are only used when building the package directly for use outside of a Sencha Cmd app build.
If you’re working on Ext.app.Profile (“app profiles” or “runtime profiles”), then the answer is somewhat. The app profiles loaded are determined exclusively by the Application class used to launch the app, but they can be implemented in a shared package if desired.

Are PWA features available for Classic toolkit?

This is a feature of Sencha Cmd, so it’s built to work for Classic as well as Modern toolkits. If you have any issues, please share your questions and feedback in the forum.

Where can I find documentation on app.json?

Sencha Docs includes guides that explain app.json details about Microloader and Resource Management. You can also find details on dynamic package loader in the What’s New section.

Why was the .sencha folder removed from Ext JS 6.5?

Question details: We used the .sencha folder to exclude many classes from all-classes.js. How can we do that now. Also, we used it in Ext JS 6.0 to add a new property configuration.

There is a switch on sencha app upgrade:

    sencha app upgrade --legacy

This switch will preserve the .sencha folder and upgrade it as before.

The reason the .sencha folder was removed by default was to reduce the project complexity for new users as well as experienced users who found it to be a maintenance burden.

Sencha Tools

When will there be updates to the Sencha IDE plugins with support for Ext JS 6.5?

We plan to release an update to Visual Studio IDE plugin to support Cmd 6.5 in next few weeks. We have tested all of the other plugins – JetBrains, Eclipse, and Visual Studio Code – to confirm support for Ext JS 6.5 and Cmd 6.5 projects. If you see any issues, please report them in the forum.