Blog

Ext JS 4 Beta 3 is Available Today

April 14, 2011 | Ed Spencer

Today we're delighted to release Ext JS 4 Beta 3, which continues our weekly release cycle as we rapidly close in on Ext JS 4.0 Final. So far you’ve helped us with almost a thousand improvements, bug fixes and new features since the first preview release and we can’t wait to repay your dedication with a rock solid final release in the very near future.

Download Ext JS 4 Beta 3 View Examples

While we are tracking a small number of known issues that affect various edge cases, in general we are very happy with the stability of the framework. We’ve updated a lot of examples and documentation and I’d like to share some of those changes with you now.

MVC Guide and Examples

One of the biggest new pieces of functionality in Ext JS 4 is the application architecture. Based on an MVC structure, the new app architecture not only organizes your application code, it also vastly reduces the amount of code you have to write. Until now, there had been few details on how to use MVC with Ext JS so in this Beta we’ve addressed that by adding two full MVC examples (MVC Feed Viewer, Loading Nested Data Example) and a detailed guide on how to use it to create apps.

We hope to include additional MVC examples, tutorials and documentation in the final release, but in the meantime I hope what we have provided in Beta 3 is enough to whet your appetite and encourage you to dig in and write your own apps with the architecture. We’ve actually significantly simplified the approach provided out of the box (MVC is only 3 classes), while making it enormously more powerful by leveraging the brand new ComponentQuery.

For those who haven’t encountered it yet, ComponentQuery is a selector engine for Components. It enables you to search the page for components just like you search the DOM for elements. Say you want to get all of the grids on the page with the title “Users” — it’s as easy as:

Ext.ComponentQuery.query('gridpanel[title="Users"]');

ComponentQuery accepts an almost unlimited number of selectors and can be nested to any level. Check out the CQ docs for lots more examples, and the MVC guide for how to leverage this powerful new technology in your applications.

Property Grid Returns

One component that we had held back from the beta was the Property Grid. We’re pleased to include Property Grid now in Beta 3, and it’s sporting a much improved API. In previous versions Property Grid didn’t use the Store system, instead it accepted only an object that provided the keys and values to edit. Ext JS 4 still accepts the old format, but is now also able to take a Store just like any other grid. We’ve created a new example showing off the Property Grid, which you can find in the new hosted Beta 3 examples.

API and Documentation Improvements

In November at SenchaCon 2010, I highlighted the class API and documentation as two of the things we really wanted to improve upon for Ext JS 4. Although we’re not at 4.0 final quite yet, we’ve already poured a lot of effort into improving both of these.

I’ll start with the API documentation. We’ve been updating both the documentation itself and the application that it is presented in, and for the first time in Beta 3 have added a new Guides section. We have detailed guides on everything from Trees to the Class System and will continue to build this valuable resource over the course of Ext JS 4.x. Even excluding the new guides, Ext JS 4 already has almost twice as much developer documentation as Ext JS 3.

We also committed to improving the API wherever possible in Ext JS 4. For the first time we have a formal API style guide, which defines how we name the classes, functions and configurations in the framework. Between Beta 2 and Beta 3 we brought the framework into line with this style guide, which involved a number of changes. We have detailed all of the changes we made since B2 in the release notes so if you are already using the previous Beta releases for your apps you will need to update your code to use the standardized APIs.

We will be releasing the API style guide with Ext JS 4.0 final and encourage you to read it both to understand why things are named the way they are, as well as to use the same conventions throughout your own code.

Performance Improvements

A number of performance improvements have been committed to the framework over the last couple of weeks. Firstly we were able to optimize the class definition and loading system to significantly reduce boot time over previous releases. We’ve also capitalized on the unified rendering system to speed up component rendering through a more intelligent template compilation algorithm. Finally, a number of low-level but very frequently called DOM functions have been optimized to make UI rendering and manipulation even faster.

These performance improvements combine to make Beta 3 feel noticeably faster than the releases before it, but we’re not done yet. Performance tuning is an ongoing process and we expect the framework to get faster and faster over time.

The Road to Ext JS 4.0 Final

Our focus from now until final is on fixing any remaining bugs and further improving documentation. We also aim to release updated Calendar components along with 4.0 final. Your help in testing the framework in the real world continues to be invaluable and greatly increases the speed at which we are able to deliver the framework to you. Thank you once again, we can’t wait to share the finished product!