Top 5 reasons for upgrading to Ext JS 5
- New Components
Ext 5 adds support for a drag & drop dashboard component, an improved combo box with tag selector, and grid widgets.
- 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.
- 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!).
- 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.
- 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.
Upgrading to Ext JS 5 in Five Easy Steps
Before you begin
Step 1: Create a Sencha Command Project
sencha generate app -ext SpendingPortal spendingportal
Step 2: Copy the Ext 4 classes into the Ext 5 project
- Delete the controller, model, store, and view folders from /extjs5upgrade/spendingportal/app
- Copy /extjs5upgrade/before/app/*.* to /extjs5upgrade/spendingportal/app
- Copy /extjs5upgrade/before/app.js to /extjs5upgrade/spendingportal/app/Application.js
Step 3: Tweak the Application.js file
Step 4: Invoke Ext 4 Compatibility mode
requiresproperty in the app/app.json file to load the Ext 4 charting package:
Step 5: Add Tablet Support
themeproperty in the /extjs5upgrade/spendingportal/app/app.json file to resemble the following: