Ext JS 4.1 Final Released

April 24, 2012 | Don Griffin

It is with pleasure that we announce today the general availability of Ext JS 4.1. This release represents a significant step forward for the performance of Ext JS 4, including several new features and numerous other improvements. With the three betas and the three RCs, we’re also extremely thankful to the community members who have helped us with bug reports, forum posts, emails, tweets, and field testing on production applications to make this a huge step forward for Ext JS!

Download Ext JS 4.1
Ext JS 4.1 Upgrade Guide

Table of Contents

Performance

This release focused primarily on improving performance of the rendering and layout processes. On our test applications and community contributed tests, we’re seeing anywhere from a 30% to a 100% improvement in end-to-end display time. The new bulk rendering mechanism allows us to render the right markup initially and avoid expensive manipulations of the resulting DOM elements. The new layout engine is designed to minimize the number of costly browser reflows required to layout components and containers.

While many other, smaller, optimizations made it into this release as well, the focus of the release was on layout and DOM performance optimizations. We’ll continue working on further performance improvements in subsequent releases, and we’re always open to your input in the forums to see what areas you think need our attention next.

Grid

The return of native scrolling for grids has been covered previously so I won’t go into that further. The many improvements to infinite/buffered scrolling will be great news for applications with large data sets. For grids that use the “locking” feature, many other features now work properly on the locked and unlocked sides of the grid.

Layouts

Most of the work on layouts has been to make them faster by avoiding browser reflows. In the process, however, most layouts benefited from the refactor in other ways. Most notably, the “border” layout’s new features have been covered previously. In addition, the width shrink-wrapping that used to be handled by specialized components (e.g., tooltip or menu) is now properly handled by the core layouts. Not only did this change make those use-cases much more efficient (by avoiding repeated layouts), but now this functionality is more generally available in your applications.

Core

There have also been significant improvements in XTemplates and overrides. Much of this has been covered before; however, Ext.override has also gained a new bit of useful functionality: it can now override instance methods (e.g., on a singleton), allowing the overridden methods to be called using the standard callParent method.

Another handy addition to event listeners is that the use of method names (rather than function references) is now supported. For example:

listeners: {
        click: 'onClick',
        change: 'onChange',
        scope: someObject
}

In previous versions, the above would have looked like this (which is, of course, still valid):

listeners: {
        click: someObject.onClick,
        change: someObject.onChange,
        scope: someObject
}

The use of method names gives better diagnostic messages in development mode for missing methods.

Tooling

We’re also excited to release alongside Ext JS 4.1 the new release of the SDK Tools, Beta 3. The new version of the SDK Tools is required to generate images for custom themes using Ext JS 4.1. This same version of the SDK Tools is also compatible with the latest release of Sencha Touch 2.

Included in the example folder of the Ext JS 4.1 download is a web page-based tool called the Page Analyzer. This has been covered as well, but its use is highly recommended to get the best performance out of Ext JS 4.1. It is also invaluable for diagnosing layout problems.

Docs and Guides

Of course, the documentation center has been updated to use Ext JS 4.1! In addition, there is new content important for moving to the new release. There is a new Optimization Guide based on the related blog post and webinar. Reference it for the latest advice on tuning your applications for best performance. There is also an Upgrade Guide covering the API changes that will likely impact your move to Ext JS 4.1.

Conclusion

Ext JS 4.1 brings significant improvement to your applications, and we are investing heavily in exceeding our customer’s usability and performance expectations.

We want to take this moment to reiterate our commitment to our customers on various versions of Ext JS. We blogged about extending support of Ext JS 3 for 12 months beyond the next major release after Ext JS 4, and support subscribers will continue to receive patch updates for Ext JS 3.4.x, including support for IE 10.

We are very excited about Ext JS 4.1 and are looking forward to your feedback. Go to the forum and let us and the rest of the community know about your experience with Ext JS 4.1!