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!

The initial view of the Ext JS 4 application I architected
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.
Table of Contents
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!
Looked great already back in 2007, and still looks awesome 11 years later :)
Thank you Mats! That’s great to hear! And thanks for sharing!
It’d be cool to hear a history further back (if anyone at Sencha was around back then). I adopted Jack Slocum’s yui-ext 0.33 way back (2005/6?)
Jeremy,
YOU were the other guy? :-)
yui-ext 0.33 set me on a wonderful path for the next decade.
Well, I wasn’t around then that far back. But I wanted to say, thanks for sharing!
Nice write up Marc! Might want to include the goodies from 6.5 (https://docs.sencha.com/extjs/6.5.0/guides/whats_new/whats_new.html)
Thanks Don!
very interested in the upgrade steps from 4 to 6, when might those articles be written?
Thanks Scott! We do have upgrade guides from V4.x to v5.x, and V5.x to v6.x. Those are located here:
https://docs.sencha.com/extjs/5.0.0/guides/upgrades_migrations/extjs_upgrade_guide.html
https://docs.sencha.com/extjs/6.0.0/guides/upgrades_migrations/extjs_upgrade_guide.html
Good question Scott. Lee provided some good guides to help get started. But just in case you might be interested, we can help with upgrades. We have a team that can quickly upgrade your project to the latest. If you’re interested in a cost estimate, you can fill out a form on the site, or you can ping me and I’ll get you connected with the team that does the cost estimates. We have helped others in different ways, such as just providing a hand on some of the upgrade pieces or to doing it all and handing it back to them ready to go.
Has it really been that long? I still remember the 4.0 growing pains that didn’t get sorted out ’til 4.2 :)
Good point, time flys by. I remember those growing pains too.
Amazing, we would love to bring our ExtJs 4.2 to 6.6 asap so please share with us how to migrate. Thanks
Thanks for asking. Just in case you didn’t see the reply above, here are some guides to help.
https://docs.sencha.com/extjs/5.0.0/guides/upgrades_migrations/extjs_upgrade_guide.html
https://docs.sencha.com/extjs/6.0.0/guides/upgrades_migrations/extjs_upgrade_guide.html
And just in case you might be interested, we can help with upgrades. We have a team that can quickly upgrade your project to the latest. If you’re interested in a cost estimate, you can fill out a form on the site, or you can ping me and I’ll get you connected with the team that does the cost estimates. We have helped others in different ways, such as just providing a hand on some of the upgrade pieces or to doing it all and handing it back to them ready to go.
It would be very coll to read step by step guide, how to upgrade from 4.x to 6.x version
Good question. This response is going to look like a repeat here because I was slow to get back.
Here are some guides to help. Support is also standing by to help with questions that weren’t covered.
https://docs.sencha.com/extjs/5.0.0/guides/upgrades_migrations/extjs_upgrade_guide.html
https://docs.sencha.com/extjs/6.0.0/guides/upgrades_migrations/extjs_upgrade_guide.html
And just in case you might be interested, we can help with upgrades. We have a team that can quickly upgrade your project to the latest. If you’re interested in a cost estimate, you can fill out a form on the site, or you can ping me and I’ll get you connected with the team that does the cost estimates. We have helped others in different ways, such as just providing a hand on some of the upgrade pieces or to doing it all and handing it back to them ready to go.
Nice post, Marc! I’m totally agreed with you, but I had started since Ext 3 to now and I still develop in Ext 4. I had planning to migrate my code to Ext 6 for a while. I really apreciate your iniciative and I’m waiting anxiously for the next post.
I wanted to thank you for sharing!
Thank you so much for sharing the pretty much informative article sir; my best wishes.
This is extra variant information just like a wow! Thanks for the share.
Thanks for sharing very informative post.
thanks