Blog

Ext JS 4.0 Final Available Today

April 26, 2011 | Ed Spencer

On behalf of Sencha and the entire Ext JS team, I’m proud to share that following five successful Preview Releases and three Betas, we’re releasing Ext 4.0 today.

Ext JS 4 marks the most comprehensive modernization of the framework since its inception, featuring an improved architecture and many new features that will enable you to create the next generation of rock solid applications for the web. Almost every aspect of the framework has been upgraded and optimized to leverage today’s modern browser, while providing fidelity to their predecessors.

Download Ext JS 4.0 Read the Release Notes View the Examples

Our Community

We want to take a moment to thank our community for their constant support. Together we have created the world’s most advanced JavaScript framework.

On the road to the final release, we heard tons of feedback from you. And we want more of it! Thus we’re also announcing a change to our subscription policy — previously only the first patch release after a major version would be made publicly available, but from now onwards we’ll be releasing all patch builds in the 30 days after a Major release. You’ve been invaluable in helping us build the best Ext JS yet.

Easier to Learn

As the web becomes the only development environment, we are excited by how many developers from different backgrounds want to learn more about being successful with web technologies. So, we’ve taken steps to make the framework a lot easier to use. We’ve added over 40 new examples compared with Ext JS 3.3, and will be rolling out more as 4.x progresses. Ext JS 4 also comes with more that twice the amount of documentation of any version before it, including 12 new guides covering everything from the class system to the new application architecture.

As well as the new guides and expanded documentation, we’ve also vastly improved our naming conventions — standardizing how we name classes, configurations, methods and events. We’ll release an Ext JS style guide explaining these rules shortly, but in the meantime checkout the newly revamped documentation center. Our new documentation center makes it easier to find what you are looking for. And in the coming months, we’ll be enabling comments, and other collaboration features.

Core Improvements

At Sencha, we believe that perfection is a journey. And with Ext JS 4, we have taken a deep look in to the architecture of the framework and reshaped our foundation to be inline with what our customers wanted from the product. These changes resulted in gains in performance and robustness.

Test Framework

We’ve applied continuous comprehensive testing to the framework in all supported browsers, both with manual testing and with the addition of over 4000 new unit tests. We’ve built tools that help us test on 21 browsers in quirks, standards, and strict modes — ensuring Ext JS is tested with a decades worth of browser technology. If there’s a pixel off, we’ll catch it.

Class System

Ext JS 4 introduces a full featured class system as part of our updated architecture. While Ext JS has always provided an excellent class system, this time we’ve taken it even further by adding support for dynamic loading, mixins, and live dependency calculation.

Sandboxing

For the first time in the history of the framework, Ext JS 4 can now be completely sandboxed. From version 4 onwards the framework no longer augments native objects like Array and Function, so there is no possibility of conflicting with other libraries loaded on the same page.

Better still, you can choose which global variable to instantiate Ext into, allowing you to run multiple versions of Ext JS on the same page. It’s even possible to change the namespaces used on all of the framework’s CSS classes. To demonstrate this we’ve set up a sandbox example which loads Ext JS 4’s charts into Ext JS 3’s desktop example, with both frameworks happily running on the same page.

Application Architecture

We’ve heard from our customers that their Ext JS projects are getting more sophisticated, and with these apps is the need for larger teams to work on them. Many of our customers wanted us to look at how we could make it easier to them to grow the scope of their Ext JS projects and scale them to their larger and often distributed teams.

In Ext JS 4, we’ve introduced a standardized MVC-style application architecture that can be followed by almost every Ext JS app. With MVC, dev teams only need to learn one architecture to be able to understand any Ext JS 4 application. Many developers often move off of one project and on to another, and making it easy to get up to speed, in otherwise unfamiliar code, was a top priority for us.

If you’re looking to start building your application using this new architecture we’ve authored a comprehensive MVC guide which introduces all of the new classes and concepts.

SDK Tools

With the new application architecture it’s now possible for us create tooling that makes writing, optimizing and deploying applications much easier. We’re launching a beta version of the Sencha SDK Tools today, with Optimizer, Builder, and Slicer among the first to ship. These tools let you optimize your JavaScript builds as well as ensure your theming works all the way down to IE6.

New Features

As well as all of the architectural improvements, we’ve also added an unprecedented number of new features to the framework. Here are a few highlights that we’re particularly excited about:

A Brand New Charting Package

One of the most exciting new features of Ext JS 4 is the brand new, plug-in free, charting package. Built on web technologies (SVG and VML), the new charting package is a write-once, run-anywhere solution that doesn’t rely on any third party dependencies. It works on every browser down to IE6, and because it’s all written in JavaScript it’s completely customizable and very easy to extend.

We’ve created pie charts, lines charts, area charts, radar charts and more — all animated, all easy to configure and all very extensible. We’ve included 22 charting examples for this release that show off many of the configurations available to you.

The World’s Best Grid

The grid is one of the most popular components in Ext JS, and with version 4 we’ve made it even better. With the introduction of “Features”, the Grid is now modular and extensible. For the first time it’s possible to combine multiple features like column locking and cell editing without the need for separate subclasses.

The best part of the new grid architecture is the minimal amount of markup the framework generates. As you use additional features of the grid, only then is new markup generated keeping your application as memory-light, DOM-light and high-performance as possible.

Because of these improvements, Ext JS 4 grids now support infinite amounts of data in a single grid — without paging. We’ve also made the TreeGrid functionality a part of the core framework, and all the improvments we’ve made to Grid you now get with Trees.

More Intelligent Rendering and Layouts

We’re introducing a new rendering and layout pipeline that only updates the DOM when necessary, resulting in much snappier applications. We’ve coined it “split DOM.”

Ext JS 4 has a new standardized rendering and layout pipeline, which makes it easier to create and lay out custom components. By standardizing the rendering process for every component we make components render more quickly and more correctly, and the updated layout system intelligently lays out components only when they need to be, making your applications feel snappier.

We’ve also made improvements in the layouts themselves. We’ve removed FormLayout, meaning you can now create beautiful forms using any combination of layouts. We’ve also added a brand new layout called the DockLayout, which makes it easy to dock components inside other components.

Supercharged Data Package

One of the foundational pieces of Ext JS is the data package. Whether you need to load data to populate a grid, tree or other component, the improved data package makes this easier than ever. With a new architecture and support for HTML5 localStorage, data flows effortlessly in and out of your application.

If you’re interested in finding out more about how the data package is architected and how to use it, here are a few resources to get you up and running:

• Data Package Overview
• Anatomy of a Model
• SenchaCon 2010 data architecture video

Advanced Theming Support

Ext JS 4 includes enormously improved theming support. From our experience and customer feedback with SASS and Compass in Sencha Touch, we’ve extended our use of these powerful tools to the entire framework. This makes it much easier to theme Ext JS applications than ever before.

More To Explore

We’ve mentioned a few of the exciting new features in Ext JS 4, but there’s much more to talk about. Here are just a few of the other benefits of upgrading to Ext JS 4:

• Vertical Toolbars can be docked to the sides of a container
• The new ComponentQuery class makes it easy to search for components in your app
• The new FocusManager makes it easy to enable keyboard navigation on any application
• Support for new browsers: IE9 and Firefox 4

Check out the What’s New in Ext JS 4 page for a comprehensive list of the new features.

The Ext JS 4.x Roadmap

Ext JS 4.0 lays the groundwork for the next generation of web application frameworks. In the future, we intend to refine the experience of both writing and using Ext JS applications, introducing native RTL and ARIA support as well as an upgraded PivotGrid. We’ll also be bundling additional themes and large example applications, including the Calendar.

Your bug reports, questions and suggestions have made all the difference in delivering this release. We hope you enjoy using Ext JS 4 as much as we have enjoyed building it.