Blog

Ext JS 3.0 - Be Outstanding

August 10, 2009 | Abraham Elias

Excellence

Assurance

For quite some time we have offered SVN access to our support subscribers. This enabled many of you to access the latest and greatest features of Ext JS for your project. At the same time, it also introduced some unforeseen bugs due to ongoing development. While this might have been exciting to some, many of us with existing projects wanted just the "fixes" without the "feature enhancements". In order to accommodate this level of quality, we've had to make a significant investment in our internal processes.

Ext JS Public Commit Log

Release Cycle

As we continue to grow our product offering, not adhering to a strict release schedule has presented issues. We want to exceed your expectations by releasing software you've helped support. We want to "Release Soon, Release Often." Therefore the Ext Team will be releasing Quarterly public releases of Minor Revisions. To strengthen our support offering, we are now introducing "Monthly Patch Builds" to our support subscribers with just the "fixes".

JS Builder 2

We have created a new build tool along with a new file format for Ext 3.0. JS Builder was a great tool for managing your Ext projects but it had a severe limitation that it could only run on Windows. We have implemented a cross-platform Java application named JS Builder 2 to replace JS Builder. In the past, you had to build multiple jsb files in order to build an entire Ext build. This process was repetitive and could become quickly time consuming if you did not write a batch script. The new jsb2 file format is able to handle multiple build targets in a single file and makes building a breeze.

Consistency

There have been some changes to the folder structure of Ext JS to be more consistent with our development going forward. Within the Ext 3.0.0 download you will now find that the "source/" directory has been renamed to "src/". This change was made to mirror what is retrieved from the SVN repository is what you will find in a packaged download.

CSS Refactor & Improvements

Theming has now become easier than ever due to the separation of structural and visual CSS. Each component now has its own visual CSS file which describes its appearance. To create your own complete theme, simply override each rule for colors and images in the visual css directory.

CSS Scoping

Placing standard HTML into an Ext.Panel has become easier with the new configuration preventBodyReset. When preventBodyReset is set to true your HTML will get the standard W3C suggested styling. This means that your standard HTML items will look the way you would expect them to if you loaded them up within a browser without any custom CSS.

Layout Managers

Up until now we have demonstrated only the user interface specific features which are new to Ext JS 3.0. There are also many features which aren't UI specific. First off, both Menu and Toolbar have been updated to be proper containers with their own custom layout managers. By implementing these custom layout managers we were able to achieve the complex overflow enhancements. We have also introduced 2 new layout managers for general use named hbox and vbox. The hbox and vbox layouts enable developers to layout components horizontally and vertically based on ratios for incredibly complex interfaces.

Ext.data Improvements

The Ext.data package has been improved to incorporate Ext.data.DataWriters which can write back changes which occur client side back to the server-side. Writers are configured similarly to a DataReader and are now one of the constituent pieces of a store. The store exposes several methods like save and create which will trigger communication with the server-side based on the configuration of the writer.

 
// The new DataWriter component.  Elegance in simplicity.
var writer = new Ext.data.JsonWriter({
    encode: true,
    writeAllFields: false
});
 

Memory Management Improvements

Ext 3.0 has a new memory management model for Ext Components. This new approach eliminates many of memory consumptions issues encountered in long running Ext 1.x and 2.x applications. This new model exposes a function, mon(), which you can use to bind listeners to external objects which will be automatically cleaned up at the end of the component's lifecycle. This new method to Ext.Component called mon(), which you can use to bind events to external objects, either DOM elements or Ext classes. mon() adds the listener to an internal collection which is destroyed when the object is destroyed, assisting you in memory management. All Ext Components have been changed to use this method where appropriate.

//Old Style
this.el.on('click', this.onClick, this);
 
//New Style
this.mon(this.el, 'click', this.onClick, this);

Innovation

In order to stay at the top of our game, we will to continue innovate. We will continue to provide elegant solutions to existing problems and lead where others have faltered. This is our promise to you and to ourselves.

Accessibility

We are 100% committed to supporting and incorporating improvements to help you build accessible applications by offering keyboard navigation, screen reader support, and a new high contrast theme for your entire application.

While Ext has always had native support for key binding for our most popular components, traversing your application using a keyboard was left up you to develop. With the new Focus Manager component, coupled with the new class inspection, you won't need to write a line of code.

ARIA support is an evolving standard. Ext is working on adding ARIA support to the major components like Panel, Tree, Menu, Window, Grid. Using a screen reader like NVDA, with this tree example, will show how elegant accessibility can be for everyone.

Designer Preview

Constructing your interfaces in code will be a thing of the past. We are releasing a Designer Preview that will allow you to experiment with the designer interface and to explore how configs affect your layout. Soon, you will be able to build your application components using base Ext components and Certified User Extensions.

Code generation is currently not available. Our intentions are to charge a fee for this service and to enable our community to create and sell their creations on our marketplace. Our goals are lofty. We want to be the iTunes of Web App Development.

Summary

While many of the features of Ext JS 3.0 have been covered in previous posts, we've really just touched the surface of the power of Ext JS 3. Its been an amazing journey thus far, and we have a clear view of where we are going. We aim to provide you the tools to be Outstanding.