From then to now: Ext JS 4.x to 6.x, Royal Weddings, Space Shuttles and Oprah

What a difference 7 years makes!

The year was 2011. What a year it was! A royal wedding, the last flight of the space shuttle, Oprah’s final episode, and… Ext JS version 4.0.0 was launched (on April 25, 2011)! Back then I was a Sencha customer and built a dashboard-oriented Ext JS version 4 application for one of my customers.

Looking back on that application it had a lot of great features but it was a lot of work to maintain. There was a lot of code in Global Controllers, no data binding support, we used ext-all.js for the framework, and we didn’t use Sencha Cmd. We needed to build a lot of custom components to support the functionality we wanted, and it also wasn’t a single page application…but it worked!

Fast forwarding seven years to today, we now have the latest release of Ext JS version 6.6 available and coincidentally released it right after yet another royal wedding! A LOT of great new features have been added to the framework between the 2011 and 2018 royal weddings. I know that there are many of you who, like me, built applications with Ext JS v4, and I know there are still a good number of those that are still running.

The question now is one of upgrading – why should I upgrade? What is the best way to do it? What are the great new features I can take advantage of?

Well, you may not be familiar with all of the great new features that have been added to Ext JS since version 4 – and the last release of version 4.2.0 was on March 13, 2013 (the year ‘selfies’ made it into the dictionary) – there has been a lot of innovation in the framework since then.

So, I am sure there are many of you who have been busy and are probably not familiar with all of the new features since version 4. In this blog series, I will discuss all of these great new features and along the way I will show you how to bring your version 4 application up to version 6.6.

To kickoff this blog series, I want to start with a summary of how far we have come in the past 7 years. We have had 2 major versions since then; versions 5 and 6.

Ext JS Version 5

Version 5 has several key enhancements; the most significant being the merging of the Ext JS and Sencha Touch ‘core’, and the addition of a new MVVM architecture to greatly simplify the structure of an Ext JS application.

So why is that important? Well, following an MVVM construct which utilizes View-based Controllers instead of Global Controllers and allowing for two-way data binding significantly improves the organization and maintenance of your application code. For mission-critical business applications this can significantly reduce the cost of supporting an application.

Version 5 also introduced routing to the framework as another way to standardize and simplify interactions with the views of your application.

There were also several other innovations added to version 5:

Ext JS 5.0.0

• Tablet Support
• New Themes: Neptune Touch and Crisp
• MVVM: Data Binding
• View Controllers: References
• View Models
• Routing
• Responsive Configs
• Data Package Improvements: Models, Associations
• Sencha Charts Improvements
• Tab Panel Improvements
• Grids: Cell Components, Buffered Updates, Cell Updaters, Grid filters, Rendering Optimizations, multi-select Widgets
• Breadcrumb Bars
• Form Package improvements: Tagfield, Segmented Buttons
• New SASS mixins

Ext JS 5.0.1

• Accessibility enhancements
• Responsive Configs
• Chart Themes
• Cordova and PhoneGap packager

Ext JS 5.1.0

• Grid Spreadsheet model, Clipboard plugin
• 3D Bar and Column charts
• Advanced Color Picker
• Rating Widget

Ext JS Version 6

With Ext JS version 6.0.0, the most important innovation was the merging of Ext JS and Sencha Touch as two toolkits – Modern and Classic. Among other things, this gave us the ability to create a Universal application from a single code base along with the ability to support multiple devices (desktop, tablet, phone, etc.). And Universal applications are just one of many new innovations in version 6 – here are many more we will explore in the course of this blog series:

Ext JS 6.0.0

• Merging Ext JS and Sencha Touch
• Universal Applications
• Triton theme
• Fashion
• Promises Support
• Grid Spreadsheet mode enhancements, locking grid
• Treelist (for menus)
• Responsive Column
• Pie 3D Chart
• Pivot Grid
• Exporter
• Direct Accessibility Support
• Microloader: Caching

Ext JS 6.2.0

• Calendar
• D3
• D3 pivoting
• Grid row body widgets: rowexpander plugin, check columns
• Material design theme, IOS theme
• SparkLines

Ext JS 6.6.0

• npm Packages
• ext-gen, ext-build
• Modern timefield, timepanel
• Modern localization
• Graphite theme
• Dynamic styling for material theme
• Enhanced routing
• Gauges

I look forward to taking you on this journey of how Ext JS has evolved and improved over the past 7 years. Along the way, I will demonstrate many of these great new features, and we will also discuss how to bring your version 4 application up to version 6.6 – so you can start taking advantage of all of these great new features in your applications!