Sencha Inc. | HTML5 Apps

Blog

Announcing Sencha Ext JS 5

June 02, 2014 | Gautam Agrawal

Sencha Ext JS 5

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

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.

mvvm

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 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 (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'
    }
}
responsive design demo

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 are required when using your fingers on touch devices.

neptune touch crisp touch

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 enhancements

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 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.

touch optimized charts

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+.

browsers

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.

There are 40 responses. Add yours.

Jay garcia

5 months ago

Congrats Sencha dev team!!!!

Austin Kim

5 months ago

Although it is little surprising news, now I’m comfortable to migrating to ExtJS 5.

Thank you Sencha!

Austin

Christian Dubé

5 months ago

Good job guys ! Congratulations on this release.

Mike

5 months ago

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

Vijay Sarin

5 months ago

Congrats Sencha Team. Hoping to see the Demos and GPL version for enthusiastic Devs like us.

Dawesi

5 months ago

Most excited about this release and all the raft of goodies it has!

Bring on Touch 3 also!! Woot!

Mitchell Simoens Sencha Employee

5 months ago

@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.

Mitchell Simoens Sencha Employee

5 months ago

@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: http://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/

Balazs

5 months ago

This is great!

One question: does Architect support Ext JS 5?

Thanks,
—-
balazs

Mitchell Simoens Sencha Employee

5 months ago

@Balazs Not yet but they have been working on updating it and expect it out soon

Balazs

5 months ago

Great, thank you Mitchell!

Alex

5 months ago

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.

Wemerson Januario

5 months ago

Haha Sencha team! Surprising news! Thanks!

Raul

5 months ago

So Sencha subscriptions after June will go up?

Man that sucks

Anonymous Coward

5 months ago

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

 

Ted Driscoll

5 months ago

Alex, when you buy Complete, you get 1 year of support, this covers you for all versions for the next year.

Mitchell Simoens Sencha Employee

5 months ago

@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

Aditya Bansod

5 months ago

Congrats Sencha team!

MG

5 months ago

Will Sencha Architect 3 work with Sencha ExtJS 5?

Svenna

5 months ago

Architect 3.1 will be ready Soon, and support ExtJS 5

Mitchell Simoens Sencha Employee

5 months ago

John Doe

5 months ago

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.

John Doe

5 months ago

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.

Marc Fearby

5 months ago

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.

Mitchell Simoens Sencha Employee

5 months ago

@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.

bone

5 months ago

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.

Mitchell Simoens Sencha Employee

5 months ago

@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.

bone

5 months ago

@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 smile

Love you guys tho.

Mitchell Simoens Sencha Employee

5 months ago

@bone, understood and will pass on your feedback!

Anonymous Coward

5 months ago

@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.

Mitchell Simoens Sencha Employee

5 months ago

@Anonymous Coward, Great to hear that it works. If you find any way to reproduce the issue let us know in the bug forum: http://www.sencha.com/forum/forumdisplay.php?130-Ext-5-Bugs

Tom

5 months ago

Great news! We’ve translated this for any Japanese users. You can find it here: http://www.xenophy.com/sencha-blog/11166

Deep

5 months ago

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

Gautam

5 months ago

@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

Blake

5 months ago

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.

Manuel Tejada

4 months ago

Hello,
Its possible that read QR Code with Sencha touch 1.X on IOS(Ipad)?

Rob

4 months ago

Any more news on ETA for Sencha Architect 3.1?

Dan

4 months ago

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.

Gautam Agrawal

4 months ago

@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.

Rob

4 months ago

@Gautam - many thanks for the estimate - this helps with our prioritization and planning.  Keep fighting the good fight.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.