Table of Contents
Ext JS 5: Getting Ready To Upgrade
We are very excited to welcome Ext JS 5 to the Sencha family! As with every major release,
Ext JS 5 will introduce a bunch of new features, including:
- Tablet support
- Two-way data binding
- New MVVM Application Architecture
- Widgets and the Widget Column
- Crisp Theme
- Routing
- and much more!
Please read our What’s New in Ext JS 5 guide for a complete list of our exciting new features.
Want to learn more about Ext JS 5 and ask questions about upgrading? Register now for our one-hour webinar on 4/24/14 at 10am PDT — Are You Ready for Ext JS 5.
Update: May 14, 2014
The recording for the webinar is up! Check it out below.
Testing 1, 2, 3
While there are lots of new features in Ext JS 5, many of these changes are under-the-hood. With the release of Ext JS 5 beta, we want to help you prepare your application for the upcoming GA by highlighting the following areas.
Our Ext JS 5 upgrade checklist will use the following rating system to indicate how difficult the upgrade process will be for each change:
Removing Legacy Browsers
Ext JS 5 has removed support for IE6, IE7 and older versions of other browsers — which allows for a significant reduction in logic and styling across the entire framework. Coupled with additional optimizations, Ext JS 5 is an amazing step forward for enterprise web applications!
Ext JS 5 now supports the following browsers:
- IE8+ (standards mode only)
- Firefox 12+ (PC & Mac)
- Safari 6+
- Chrome 18+
- Opera 12+ (PC & Mac)
Most developers know which browsers they need to support, so we anticipate this part of the upgrade will be easy.
Doctype
Another important change in Ext JS 5 is that we now recommend the use of the HTML5 doctype:
<!DOCTYPE html>
Omitting this doctype or using something different could result in strange behavior, such as incorrect display, positioning issues, etc. The HTML5 doctype is supported by IE8 and is the new standard doctype with backwards compatibility for HTML4, so it really makes the most sense for Ext JS 5.
We imagine this part of the upgrade should also be relatively straightforward. If your application has a lot of CSS geared specifically for IE6-7, then changing the doctype might be a bit more cumbersome.
Sencha Cmd
With the release of Ext JS 5, it is highly recommended that you use the latest version of Sencha Cmd to generate your application architecture and manage production builds.
The Ext JS 5 framework is now an encapsulated Cmd package — which means that "core" pieces of the framework are now fully modular and even shared by Sencha Touch.
Opening up the Ext JS 5 SDK, you’ll see the following folder structure:
As you can infer from the package names, packages named with the "ext-" prefix are specific to the Ext JS framework (e.g. "ext-theme-neptune") while those named with the "sencha-" prefix are shared resources across frameworks (e.g. "sencha-core").
It will help to familiarize yourself with the location of these new packages, even though much of the underlying code has not changed.
Already Use Sencha Cmd?
If your existing application runs Ext JS 4.2.x and was built using Cmd 4.x, then updating your app via sencha app upgrade should be relatively smooth.
Ext JS applications already built with Sencha Cmd should experience minimal impact when upgrading to Cmd 5.x. See the Sencha Cmd 5 Upgrade Guide for more details.
Not Using Sencha Cmd?
If your application was not built with Sencha Cmd, you might decide to simply generate a fresh application using sencha generate app and manually copy your /app/ folder into the new architecture in order to take advantage of the many benefits in Cmd. Alternatively, if your application is already using the recommended folder structure, you can just generate the Cmd scaffold on top of the app with "sencha generate app –starter=false".
Customers new to Cmd should certainly expect a small learning curve. See the Ext JS 5: Getting Started Guide for more info.
For those customers who wish to remain independent of Sencha Cmd, you can find more information about the build files (e.g. ext-all.js or ext-all-debug.js) in the Ext JS 5 Upgrade Guide.
Compatibility Layer
One additional benefit of using Sencha Cmd is the ability to easily control the new compatibility layer, which will help to make the 4.x to 5.x upgrade (as well as future upgrades) as smooth as possible.
Ext JS 5 introduces some new mechanics in how parts of the API get marked as deprecated. To compensate for applications upgrading from a previous version, you simply set your supported framework version in app.json and warnings about deprecated APIs will be output to the browser console.
For example, the class Ext.form.field.Trigger is deprecated in 5.x and using it will throw an error. But if you set the compatibility layer to 4.2, the old behavior will be restored and you will see a warning issued to the browser console. In this manner you can smoothly upgrade each warning rather than experiencing broken APIs.
To configure your application with Ext JS 4.2 level compatibility, simply set the following property in your application’s app.json:
compatibility: {
ext: '4.2'
}
Because the compatibility level is an optional development feature, there should be no negative impact to the upgrade process. In fact, using the compatibility level should make the upgrade process easier overall. See the Ext JS 5 Upgrade Guide for more details.
Config System
Sencha Touch developers should be intimately familiar with the config syntax for defining classes. Ext JS 5 adopts this paradigm in a slightly modified fashion — more information can be found in What’s New in Ext JS 5.
This change will likely affect any custom components which call initConfig() themselves — so be sure to check your UX classes.
You still need to use "config: {}" to declare new config properties, but derived classes can now set these directly on their class body. This approach allows derived classes to remain compatible with their base even if the base class switches a config over to use the config system.
Classes written for Ext JS 4, where the config system was not used, remain compatible with Ext JS 5 even where the config system is now being used.
The config system will create some work during the upgrade process for developers unfamiliar with the concept. Generally speaking, the framework will issue warnings to the browser console when properties should be moved into a config object, but expect this part of the migration to take some time.
Charts
With Sencha Touch 2.1, we introduced a new, high performance, touch-optimized charts package. With Ext JS 5, we have enhanced this charts package to work on both Ext JS and Sencha Touch. This brings lots of new capabilities as well as great performance on tablet devices.
The Ext JS 4 charts have been converted into a separate package, so you can still use them when upgrading to Ext JS 5 to minimize your conversion effort. The process of updating to the new charts package simply requires switching out the ext-charts package for the new sencha-charts package. Most of the APIs are the same, and the few that are not are covered in the Ext JS Charts Upgrade Guide.
Our current Ext JS charts will remain in the framework at least until Ext JS 5.1. However, they will not gain any of the new features or functionality included with Sencha Charts.
Many customers have customized the charting package for their applications, so upgrading to Ext JS 5 might cause some friction. While the new charting package is very similar to the old one, expect to find some API differences – refer to the Ext JS Charts Upgrade Guide for more details.
Please note: the new Sencha Charts package in Ext JS 5 beta does not support chart rendering in IE8 because it lacks a VML renderer. We hope to add support for that before the Ext JS 5 GA release.
MVC and MVVM
Ext JS 4 introduced support for the MVC architectural pattern. With Ext JS 5, we are adding support for a popular alternative to MVC: MVVM (Model-View-ViewModel). One of the big attractions to MVVM is data binding, which connects the model layer to the view — updating the model when the view is modified, and vice versa.
In Ext JS 4, controllers provided a global solution for application-wide logic. Ext JS 5 now offers view-specific controllers that can be associated directly with a view instance. From instantiation to destruction, the ViewController is tied to the component that referenced it.
While global controllers created with the Ext JS 4 MVC architecture operate as usual, creating ViewControllers might be a better fit in some cases. Regardless, the immediate upgrade process should be smooth. For more information about the new MVVM pattern in Ext JS 5, please refer to the View Models and Data Binding Guide.
API Changes in Ext JS 5
We focused a lot of additional energy in making sure the transition from Ext JS 4 to 5 would be as painless as possible. Having said that, some changes should be pointed out to make sure that you are completely aware of the new landscape.
Microloader and app.json
Ext JS 5 applications built with Sencha Cmd will now use the Microloader and app.json file, making Ext JS 5 apps very similar to Sencha Touch applications. All extra inclusions should be made via the app.json file. This includes JS and CSS resources which historically were included in index.html.
Users unfamiliar with Sencha Cmd or Touch may experience a slight learning curve, but the Sencha Cmd 5 Upgrade Guide should answer all of your questions.
Ext.dom.Query
Since all supported browsers now have querySelector(), Ext JS 5 has removed Ext.dom.Query as a default requirement. This means that if you still need to use Ext.dom.Query, you’ll need to include it manually. It is also now recommended that you use only Ext.Element methods, (e.g. select(), selectNode() and query()) rather than relying on Ext.dom.Query directly.
The upgrade process for most customers might be as simple as requiring Ext.dom.Query at application start. If you spend the time to replace all uses of Ext.dom.Query with querySelector, then it may take some additional time.
Stores & Models
Stores required a few changes in Ext JS 5 that may cause issues for some updated applications. Most notably the remove event now mirrors the add event and only fires once for a range of records instead of once per record. Long-standing issues with the add and datachanged events have also been resolved, which may cause some issues if these behaviors were being relied upon. Finally, buffered store is now its own class of store and should be created using the "type" config (though "buffered: true" still works in most cases).
Models have also experienced an overhaul in Ext JS 5. Several properties on the record object have changed — most notably that record.raw no longer exists, as all data (even undeclared fields) are now available on record.data. Associations have received a lot of attention, and record.destroy() has been changed to record.erase().
Most Ext JS applications rely heavily on data access, so this is likely the place where most customers will experience friction. Please refer to the Ext JS 5 Upgrade Guide for a deeper look at the changes to the Store and Model classes.
Recommended Steps
While a more complete Upgrade Guide is available to help you navigate the full application upgrade, here are some quick recommendations for preparing your application for Ext JS 5.
Upgrade from the latest versions
We recognize that not all of our customers have the luxury of running the latest versions of Ext JS and Sencha Cmd. Time restrictions, deadlines, and support licenses often dictate what version of Ext JS is used by your organization or clients.
Taking the time to first upgrade to the latest versions of Ext JS 4.x and Cmd 4.x will make the jump into our 5.x branch much smoother because you get the advantage of many bug fixes and avoid significant API changes across several major product versions.
Check Overrides and UX
Framework overrides and custom components are usually the places where upgrade bugs are found.
The key is to document every one of these overrides and UX classes, and be sure you completely understand them.
Dissect your application logic
When you get this far in the upgrade process, it is more than likely your application loads successfully in the browser.
Inevitably the trickiest part of a major upgrade is physically testing the app during runtime. Expect most of your time during the upgrade to be spent dissecting your application logic contained inside your Controllers and event handlers.
Suggested Reading
For more information about Ext JS 5, you may want to check out a few of our guides:
- What’s New in Ext JS 5
- Ext JS 5 Upgrade Guide
- Sencha Cmd 5 Upgrade Guide
- Ext JS Charts Upgrade Guide
- Ext JS 5: Getting Started
“Microloader and app.json”: The Sencha Cmd 5 Upgrade Guide doesn’t answer our questions. The guide mention a microloader guide but I can’t find it anywhere. I guess it’s because is not yet been written, doesn’t it?
Well, a major release could be frustrating if some issues are not fixed from the previous one.
I am quite happy with last release of ExtJS 4 and the only thing I am waiting for, is to be able to use buffered store in combobox (as paging is not user friendly for combo). I am not sure to find this in ExtJS 5 :-(
Glad to hear 4.1 > 4.2 was relatively smooth for you!
While Cmd 3.x > 4.x certainly was a larger change, you’ll be happy to find out that Cmd 4.x > 5.x is far less of a jump.
Let us know if you run into specific problems because we’re dedicated to making the transition as smooth as possible for everyone!
Interesting post.
Have got on quite well with the upgrade from 4.1 to 4.2, having spent about a week overcoming the various issues. I really do hope that Sencha Cmd solves many of the issues with future upgrades.
Its new structure (coming from Cmd 3.0) has been the biggest barrier to the upgrade this time…
Cheers
We want to use ExtJS 5.0 in our product, When will the 5.0 production version be released? Thanks in advance.
Will this Webinar be recorded so that I could watch it at another time?
Nice article…
By when we can expect support for ExtJS 5 in Sencha Architect?
Great article, Art! The upgrade process seems doable, and it looks like the gains outweigh the costs.
@TkDodo – Yes, the webinar will be recorded and posted to our Vimeo channel within a day or so of the event.
@Justin / @Shreeraj – I don’t have any specific dates yet on Ext JS 5 GA or when Sencha Architect will support it. We are currently focused on delivering a solid GA for Ext JS 5, and while we expect this in a few weeks I can’t say for certain what day. I’ll try to get a better answer for our webinar, but historically we avoid committing to dates because we want to deliver a polished product rather than rushing something out the door “on time”.
It is so nice to find Ext JS 5 will be version comparable and won’t be too difficult to upgrade when GA is available. However, I’m getting confused with similarity with Ext JS 5 and Touch. It seems like Ext JS 5 shares many features like Touch and wonder why can both emerge into one package.
Also, will this be the main focus for SenchaCon14? Will they be workshop for Ext JS 5 include upgrading from older version?
I’m so exciting to work with Ext JS 5 but let’s me finish with Ext JS 4.x :)
Austin
Good info especially about buffered stores. Will you have another beta or a release candidate, when?
@Austin – Ext JS 5 and Touch 2.x now truly share the same “core” code via “packages”, so you’re right in that the two frameworks are becoming more similar. Will we ever have a singular framework covering all of desktop and mobile? That has been discussed and perhaps one day it might happen, but it isn’t going to happen anytime soon. Indeed that’s a topic which should be discussed separately.
I would expect Ext JS 5 to have a large focus at SenchaCon 2014, but honestly we have not made any final decisions on content. We will be releasing more information about SenchaCon in the coming weeks.
@Les – That’s another question I need to get clarification on. Hopefully I’ll have an answer to that by our webinar on the 24th.
I am exciting to attend this webinar.
@Mario – I logged a bug for our Docs team to investigate. It’s possible they combined they missed the link to that, or it’s possible they combined the guide with another and didn’t update the text. I’ll try to get an answer for you.
What is EXTJS 5.0 GA timeframe?
@TkDodo – Yes, the webinar will be recorded and posted to our Vimeo channel within a day or so of the event.
-> Up to now, I cannot find the video on your Vimeo channel. Is it uploaded already? If so, can you post a link?
Thanks!
The webinar was suspended due to technical issues. Tomorrow it will be the day, and it will have 2 sessions. They surely will record it and put it online.
It’s disappointing that you are removing support for IE7. It will prevent me upgrading. IE7 is baked into Microsoft Office so if you want to present UI using HTML and Javascript within an Office application as we do, there is no alternative version of IE available and upgrading the machine browser is not an option.
@Bill – we’ll continue to support Ext JS 4 for folks who want pre IE8 browser support.
How long is your commitment? IE7 is the browser exposed by Office 2013. Substantial numbers of people are still using Office 2003 in an Enterprise and most are only just moving up to 2007/2010.
What’s our exposure with ExtJS4? The lifetime of 2013 is likely to be considerable. My concern now is that ExtJS now looks like a liability for enterprise application that must integrate with Microsoft products for the foreseeable future.
Given that Microsoft is pushing a cloud first agenda and the non-web client for Office 365 comes with IE7 embedded, the decision to remove IE7 support limits the applicability of ExtJS for many application that must integrate with Microsoft offerings.
Very few people use IE7:
http://thenextweb.com/insider/2014/05/01/ie11-market-share-passes-ie10-ie9-combined-chrome-cements-lead-firefox/
@Bill – Our current support policy is that you’ll be able to rely on Ext JS 4 support through the release of Ext JS 6 + six months – so for two or three more years. (Also, if I were you, I would keep my mind open to the possibility of Microsoft upgrading the embedded browser in Office 2013 sooner rather than later. Satya Nadella is on a mission to upgrade Office with modern technology. )
That’s a moot point. IE 7 is in 2007 and 2010 and these will have shelf lives in the enterprise beyond the end of the decade. I believe you are wrong about IE7 being upgraded in 2013. Microsoft has no track record of updating released versions except to fix bugs. By contrast, Microsoft has an outstanding record of maintaining versions and ensuring backwards compatibility which means few users ever feel compelled to upgrade (Windows XP?). This is an essential feature of Microsoft products and worth its weight in gold in an enterprise. Updating 000’s of desktops and applications is not a fun or cheap task.
IE may be upgraded in the next version of Office (whenever that is) but the uptake of Office versions is extraordinarily slow.
Thanks for the support insight. It says to me we cannot move forward with ExtJS but have a couple of years to migrate away.
@Les You are right – in standalone browsers. However in applications that use an embedded browser on windows it is IE7 if that application is written to take advantage of the standard tools provided by Microsoft: in windows forms in .NET applications or in any of the hundreds of millions of copies of Office.
@Les Like most statistics they are only relevant to the scenario in which they are measured. In this case measurable statistics are only those that can be collected outside the enterprise which, by definition, excludes those which involve the millions of enterprise applications because they never appear on a public site that provides an opportunity to measure use stats.
@Bill – We’re proud to have really great legacy and fast new browser support (angular 1.3, jQuery 2 and dojo 2 will all drop IE8 support – Ext JS 5 will retain it), but nevertheless, we do not have Microsoft/IBM-style support lifetimes of 10+ years. I assume you’re going to rewrite in Microsoft native?
We dropped IE7/6 because our Fall 2013 survey indicated very low demand in the Sencha community – which is overwhelmingly serious business app developers. We continue to support IE8 because of demand from about 30% of community for it through 2015.
IE 6 I understand. I recognize I’m biased but I think you’ve made a mistake dropping IE 7. I understand the motivation but IE 7 is the browser a developer will use in any Windows application that embeds a browser using Microsoft tools. The Trident rendering engine used by IE 7 is in all versions of Office and in the .NET framework browser control. Its the one that renders HTML emails in Outlook. Microsoft cannot change it because millions of applications have been built to accommodate the quirky rendering of this engine.
Maybe a challenge you face is that many developers may not know they are using IE 7 especially with ExtJS because it just works. When they upgrade to ExtJS 5 and realize their embedded application broke you may get different feedback. After all, these use cases must be almost invisible to you.
<
Not native in the sense of WPF or Windows forms or Silverlight. The world is going (gone) HTML. We have to support Excel 2007 (and later), Office 365, Excel services and SharePoint. Today, courtesy of ExtJS, our app works embedded in an Excel custom task pane or in a standalone browser.
I guess we will be giving close consideration to the replacement in the coming weeks. But now you mention it, perhaps you are right. Since Microsoft’s tool support has same long cycles as their enterprise tools this may be a safer bet though not nearly as elegant.
ExtJS is a delight. But it seems the development tool life cycle has to more closely match the life-cycle of enterprise products. No enterprise I work with is prepared to commit to testing new upgrades because its convenient for the vendor. It’s a costly business. It’s a big part of the reason why Windows wins out over Linux on the enterprise desktop. As good as Linux is, it is rarely backward compatible even over point versions which means in order to update rebuilds are needed and, of course, the costly re-testing of hundreds or thousands of applications.
Another option would be to find an COM wrapper around a later version of the Trident rendering engine so we can use a later version of IE. If you or your colleague know of such a tool a link to the project or product would be welcome.
Before giving up on ExtJS, today we put some extra effort into find a way to continue to use ExtJS after the transition version 5. We found a solution that suits us and since I whined so much yesterday I thought it only right to let you know.
We found it is possible to change the browser version for an application by using a registry key (see http://blogs.msdn.com/b/ie/archive/2009/03/10/more-ie8-extensibility-improvements.aspx). An advantage of this approach is that the user-agent value returned by the embedded browser is correct. But there are two problems with this: 1) we’d have to update an HKLM hive key which may not be acceptable to a user organization; but b) more importantly, changing the browser version for Excel might have unintended consequences for other applications using a web browsers embedded in Excel.
The solution that works better is to use the X-UA-Compatible meta tag. At first it didn’t seem like this would work because the user-agent value is still that of IE 7. However it does change the document mode to 8 or 9 or whatever is specified in the X-UA-Compatible meta tag. After reviewing the ExtJS code it became apparent that, fortunately, ExtJS prefers the document mode setting so will behave as if IE 8 or 9 even if the browser reports that it is IE 7.
So we’re sorted and are looking forward to being able to play with ExtJS 5.
I added Ext JS 5 to the Wikipedia list of JavaScript libraries using the MVVM pattern.
“Model View ViewModel”
https://en.wikipedia.org/wiki/Model_View_ViewModel
@Bill – glad you found a way to keep using Ext JS – let us know what your experience is like with the X-UA-Compatible tag!
Please fix the audio of the webinar…it is unwatchable in it’s current form.
@MikeR – We are re-recording this webinar next week and will post it ASAP. I can’t apologize enough for the audio issues, WebEx has been giving us many problems recently and we are exploring alternatives.
@ArthurKay – will the webinar be posted soon? Thanks!
@Rob – we have already posted it for those who registered for the webinar. It will be made public soon!
Hi, the Japanese translation of this blog article is here: http://www.xenophy.com/sencha-blog/10919
Link to the Japan Sencha User Group: http://www.meetup.com/Japan-Sencha-User-Group/
@All – We re-recorded the presentation and have replaced the original on Vimeo, so those of you with access can immediately see the change.
Everyone else, we’ll be making the video public soon.
The video is now public! We have embedded it in the post for convenience.
That is great.
Is ExtJs 5 component support RTL?
When sencha 6.0 will be launched? I would like to integrate our front-end with the latest version of it.
Thanks.
Taeseer Khabees
When will the 6 start? I want to integrate it with the latest version of integration.
I think in future the problem for the programmers will be standardization of basic programming and small oline applications when it come j queries basics.
not sure if my last comment was posted well here… sorry in case of double