Latest Ext JS 7.8 is now available. Learn more

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

September 13, 2018 116 Views
Show

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

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.

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!

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More