Table of Contents
Introduction
On behalf of Sencha and the entire Ext JS team, I’m proud to announce that we are releasing Sencha Ext JS 5 today. Ext JS 5 is a huge step forward, and we want to take a moment to thank our community for all of the feedback and constant support. This was the highest beta engagement in our history, with over 100K+ downloads. Together, we have created the world’s most advanced multi-device JavaScript framework. You have all been invaluable in helping us build the best Ext JS framework yet.
What’s New
Touch Support
Ext JS 5 is the most comprehensive update to the framework since our inception. This release introduces the ability to deliver your desktop apps on touch-enabled devices — using a single codebase.
Architectural Improvements
It’s now easier than ever to build applications using the MVVM architecture and two-way data binding features. We have baked in client-side data session management to minimize round-trips to the server. The introduction of routing allows deep linking within your applications. With these updates, your app development will be even more efficient.
Responsive Layouts
Starting today, Ext JS 5 provides the ability for your apps to have an optimal viewing experience across desktops and tablets, regardless of orientation changes, using our new responsive config system.
Component Upgrades
As your component needs grow, Sencha continues to enhance its component library. With Ext JS 5, you can now add widgets inside a grid cell for data visualization and big data analytics. Ext JS 5 adds an upgraded touch-optimized charting package with financial charting capabilities.
See It In Action!
Deep Dive into Ext JS 5
Unified Events Across Desktops and Touch-screen Devices
Ext JS 5 is the first version that allows the same code to power both desktop and touch device experiences. Using a gesture system introduced by Sencha Touch, we have wired in all the code needed to support gestures such as pinch, zoom, swipe, tap, long press, etc., so you can take your existing desktop apps to the tablet platform with little or no effort. We have mapped the mouse-click events to touch gestures using our delegated event system which automatically does the translation.
MVVM Architecture and Two-Way Data Binding
In Ext JS 4, we introduced the MVC architecture. With Ext JS 5, we have introduced MVVM (Model-View-ViewModel) architecture that enables two-way data binding and a better separation of concerns between the business and display logic. MVVM allows changes made in the view to be automatically written back to the model (and vice versa). This live and automatic synchronization between views and models (two-way data binding), saves a lot of time and reduces development time errors. We have also added computed values and fields, so an object bound to a view can be transformed using computation before synchronization. We hope that you find the new MVVM architecture useful.
In addition to MVVM in Ext JS 5, we have also enhanced our support for MVC with the introduction of ViewControllers. ViewControllers are scoped directly to the related View, eliminating much of the overhead required in traditional MVC to manage object references and restore the application state. Applications can now save memory and processing time by avoiding generic Controllers, which listen globally for events on Views.
Responsive Layouts
Ext JS 5 introduces a responsive config plugin to address the need for an optimal viewing experience and navigation across desktops and tablets. Applications that need to change the position and/or layout of navigational elements when the orientation changes (the device is rotated) can do so automatically using our new responsive config system.
responsiveConfig: { landscape: { region: 'west' }, portrait: { region: 'north' } } |
OR |
responsiveConfig: { 'width > 800': { region: 'west' }, 'width <= 800': { region: ‘north' } } |
Try this example by resizing the browser window on your desktop browser, or by rotating your tablet to see it in action.
Neptune Touch and Crisp Touch
There are two fresh multi-device themes that make our rich set of UI components look and feel the same on both desktop and touch-screen devices. The touch versions of our existing Neptune theme and the new Crisp theme use enlarged element sizes to support the wider contact area that is required when using your fingers on touch devices.
While you can use the touch version of these themes for both desktop and tablets, we recommend the Crisp or Neptune themes for desktop, and the corresponding Crisp Touch and Neptune Touch for tablets.
Grid Enhancements
Grid is arguably the most popular component in Ext JS, and with version 5 we’ve made our grid even more powerful. With the introduction of Grid Widgets, which can be combined with another new feature, Buffered Updates, we have enabled rich data visualization capabilities and real-time data updates to support big data analytics.
Grid widgets are new lightweight components that are useful for embedding sparkcharts, progress bars, radio buttons, sliders, and many other components inside grid cells.
Session Management
One of the most exciting new Ext JS 5 features is Session Management — we’ve added transactional sessions to our data package. When saving records to the server in Ext JS 4, you had to pay careful attention to the order in which you saved them. You also had to be sure to call save on all modified records and stores. All this bookkeeping made the reconciliation of data changes very challenging.
With Ext JS 5, there is now a class to manage these activities, called [Ext.data.Session]. A session tracks records that need to be updated, created, or destroyed on the server. It can even order these operations to ensure that newly created records properly reference other records in the transaction. Using sessions, it is now simple to edit records and their associations, gather all the updates, and commit them to your server. And because the session keeps track of all your edits, you can also get all of the changes at once, or none at all, based on whether the complete transaction is successful.
Routing
Ext JS 5 enables deep linking within applications, using URL routing methods that translate the application’s URL into controller actions and methods. Routing enables you to configure applications to accept request URLs that do not necessarily map to physical files on the server. The # part of the URL (used as fragment identifier) provides a way for your application to control the history stack of the browser without reloading the page. As the hash changes, the browser fires the ‘hashchange’ event, which can be used by the application on the client itself.
Touch-Optimized Charts
Ext JS 4 provided plug-in free charting, using our charts package built on SVG and VML. However, we found that this charting package wasn’t a great fit for mobile devices that have fast Canvas, but slower SVG, and are more memory-constrained. With Ext JS 5, we have rebuilt our charts on top of the Sencha Touch charts package, which is optimized better for touch and low memory devices. Our new touch-optimized charts package comes with more features as well, such as financial charts, multi-axis charts, 3D charts, including zoom and pan support. It has faster performance, is more extensible, and provides a great experience on touch-screens.
We have even created example apps for organizing all the different charts, much like the Kitchen Sink. Note that the existing charts from Ext JS 4 are still available as a separate package, so you can use them too. But if you are targeting tablets, you should use or upgrade to the new charting package. A detailed guide for the migration to Ext JS 5 is provided in our documentation suite.
Sencha Core Package
One of the overarching goals of Ext JS 5 was to converge much of the frameworks core between Ext JS and Sencha Touch. We’ve methodically converged code into a common core for the class system, data package, and feature/environment detection, so it can be shared across Ext JS and Sencha Touch. This common platform will enable the creation of applications that share resources, regardless of the framework, across desktops, tablets, and other touch devices. We are in the process of building and releasing Sencha Touch on top of this common core as well. Stay tuned.
Guides and Documentation
With Ext JS 5, we have not only included over a dozen new guides for new features and enhancements but also updated our guide system to make it easier to use. These guides cover everything from the framework upgrade, the new Sencha Cmd, charts upgrade, the application architecture, and more.
We mentioned above some of the most significant new features in Ext JS 5, but there’s, even more, to talk about. We will let you explore the other new features, enhancements, and improvements in our What’s New in Ext JS 5 guide.
Supported Browsers and Platforms
Perhaps the most important thing that hasn’t changed in Ext JS 5 is that we continue to support IE8 as a first-class citizen. Ext JS 5 supports Safari 6+, Firefox, IE8+, Chrome, and Opera 12+. On the mobile platform, Ext JS 5 supports Safari on iOS 6 and 7, Chrome on Android 4.1+, and Windows 8 touch-screen devices (such as Surface and touch-screen laptops) running IE10+.
Ext JS 5 Training
We have also updated the Sencha training programs. Ext JS 5 training will be available starting in June, which will include classes on Ext JS 5 Update, Upgrading to Ext JS 5, and Fast Track to Ext JS 5.
Ext JS 5 Pricing
Upon its release, Ext JS 5 licenses will be available for our current Ext JS 4.x prices through June 30th, 2014. This is a great opportunity to buy Ext JS 5 for the current price. Starting on July 1st, 2014, new prices will take effect. For more information on pricing, please visit the Ext JS 5 product page or contact us.
A Big Thank You
We wish to extend our heartfelt thanks to our community. Your feature requests, suggestions, feedback, and bug reports have made it possible for us to deliver on the goals of this release. We’ve worked very hard to minimize the need for code changes when upgrading to Ext JS 5 from Ext JS 4. We hope you enjoy building new apps with Ext JS 5, and upgrading your existing Ext JS 4 apps, as much as we have enjoyed building this version.
@Balazs Not yet but they have been working on updating it and expect it out soon
@Vijay Sarin, you can view demos online at http://dev.sencha.com/extjs/5.0.0/examples/ .
You can also download the GPL version (and the Cmd version) via the product details page: https://www.sencha.com/products/extjs/details
And if you want to play around with Ext JS 5 with your own code, you can use Sencha Fiddle: https://fiddle.sencha.com/
This is great!
One question: does Architect support Ext JS 5?
Thanks,
—
balazs
@Mike I would like to learn more about where you got that error. Likely you are using the non-build examples. If you go to http://localhost/path/to/ext/build/examples/ it should load the examples page and those examples should work.
If not, please post more information on the forums with how to reproduce.
Congrats Sencha Team. Hoping to see the Demos and GPL version for enthusiastic Devs like us.
Most excited about this release and all the raft of goodies it has!
Bring on Touch 3 also!! Woot!
Although it is little surprising news, now I’m comfortable to migrating to ExtJS 5.
Thank you Sencha!
Austin
Good job guys ! Congratulations on this release.
None of the samples work on Chrome OSX for me:
Uncaught SyntaxError: Unexpected end of input ext-all.js:19
Uncaught ReferenceError: Ext is not defined options-toolbar.js:57
Uncaught ReferenceError: Ext is not defined binding.js:1
Uncaught ReferenceError: Ext is not defined ext-theme-crisp.js:1
Congrats Sencha dev team!!!!
Great, thank you Mitchell!
If I purchase Sencha Complete in June will that cover me for Ext JS 5 plus compatible versions of Architect, Eclipse plugin etc as and when they become available for 5? Or is your June offer just limited to Ext JS 5 on its own? Thanks and congratulations on a great release.
Haha Sencha team! Surprising news! Thanks!
So Sencha subscriptions after June will go up?
Man that sucks
Nice! Congratulations on the release!
The examples does not work with Firefox 29.0.1/OS-X
Eg. nothing happens when I click things.
Best regards,
A
Alex, when you buy Complete, you get 1 year of support, this covers you for all versions for the next year.
@Anonymous Coward, What examples are you trying use? The ones at http://dev.sencha.com/extjs/5.0.0/examples/ work for me on Firefox 29 on OSX 10.9.3
Congrats Sencha team!
Will Sencha Architect 3 work with Sencha ExtJS 5?
Architect 3.1 will be ready Soon, and support ExtJS 5
Architect EAP request form: https://www.sencha.com/forum/showthread.php?279260
Hi,
I tried the demos, but they are don’t work on my phone (android 4.1, huawei, chrome and the pre installed browser).
I always get an empty page.
Previously, I tried the ext js 5 beta examples and they worked…
I’m not happy :S.
Sorry, It was not entirely true what I wrote.
The “combination examples” still don’t work, but it seems the simple examples work on my phone.
The responsive example works fine in Chrome on Windows 8 (for example) but on my iPhone it’s far too big to fit in the Safari window, in either orientation.
@John Doe, please report all bugs in the forums.
@John Doe & Marc Fearby, Ext JS 5 is not geared towards phones, tablets and desktops only.
Congratulations on the release!
Is there any overview apart from the changelog as to what has changed since the beta? I see that getReference(“myref”) isn’t working anymore in a ViewController, so I’m wondering if there are more hidden stuff that has happened.
@bone, there isn’t anything for the public beta to GA only from 4.x to 5.x upgrade guide: http://docs.sencha.com/ext/5.0.0/whats_new/5.0/extjs_upgrade_guide.html
getReference is now lookupReference. fireViewEvent is new.
@mitchell – thanks for the reply.
This is somewhat disappointing, is this because you (Sencha) have no clue what you’ve been doing between releases, or is it because you don’t care. Because if it’s the latter it’s a really bad view to treat the ones debugging your beta.
Also – ViewControllers now have to be included via ‘requires’, the whole new scope: ‘controller’ thing, Models now apparantly requiring a schema.
Thing is, I invested heavily in learning, debugging and reporting – and now I have -nothing- to show for it due to, what I consider to be, breaking undocumented changes.
I’m all in on the whole concept of ‘beta’, but if this is the norm from now on I see absolutely no reason whatsoever to care next time you drop a beta :)
Love you guys tho.
@bone, understood and will pass on your feedback!
@Mitchell Simoens
It works with a clean browser profile.
I tried to disable all extensions in the default profile without any luck. It is a mystery right now.
@Anonymous Coward, Great to hear that it works. If you find any way to reproduce the issue let us know in the bug forum: https://www.sencha.com/forum/forumdisplay.php?130-Ext-5-Bugs
Great news! We’ve translated this for any Japanese users. You can find it here: http://www.xenophy.com/sencha-blog/11166
Hi Guys,
Need some clarify on the future direction. WIll you be merging ExtJS and Touch?
We developed an app in ST 2.3.1 and it has few issues related to running on win8.1 and we were desparately waiting for 2.3.2 and now found it won’t be released to public [quite disappointed and can’t figure out why] and now seems like ExtJS does a lot what ST suppose to do, so wanna ask you what shall we do as a planning for next versions or is it time to look for another framework. Just read KO opensourced it base framework.
We’ve invested alomst a year in Sencha, so far.
Pls advice.
Deep
@Deep,
We are not merging Ext JS and ST as such. What has been created with Ext JS 5 is a common core that will allow much of code sharing across the frameworks (example: data package), in the upcoming version of ST. Since Ext JS continues to support the legacy browsers, and ST is a modern browser only framework, it is best that they are separate at some levels. Ext JS 5 targets large-screen devices that support touch gestures, so that apps built / designed for desktop can be utilized on touch enabled devices, with minimal re-engineering efforts.
As far as the ST 2.3.2, it is a support only version. If you are a support subscriber, you can get ST 2.3.2 from our support portal. In fact, with the support, customers get access to our nightly builds, and hence no need to even wait for official releases.
Thanks,
Gautam
Will Ext JS 5 be compatible with Touch 3?
With the merger of the core, is care being taken to ensure that both frameworks can co-exist in the same page (component names, etc.)? There’s a bit of irony going on right now, given how well they work with other js libraries. A company may want to build a large application in Touch and then set a profile for Desktop which switches out Touch components for Ext JS components in certain key areas.
Hello,
Its possible that read QR Code with Sencha touch 1.X on IOS(Ipad)?
Any more news on ETA for Sencha Architect 3.1?
@Gautam – many thanks for the estimate – this helps with our prioritization and planning. Keep fighting the good fight.
It’s a month since ExtJS 5 is out, but still no word about Architect ETA.. we really need some (at least vague) estimate, to be able to decide if we can afford to wait or should better switch from Architect back to plain JS development. We have cusomers waiting for Tablet support and we need to make a decision here, please give us an advice, thanks.
@Dan – We are about 4 weeks away from rolling out a version of Architect that supports Ext JS 5. Thank you for your patience and interest.