What's new in Ext JS 3.

0
Skill Level: Intermediate

Brice Mason (bmason@equipforquality.com)

Senior Web Developer
Equip For Quality

04 May 2010

Ext JS is an advanced JavaScript framework that not only supports and simplifies the
foundations of Asynchronous JavaScript and XML (Ajax) development, but also
maintains a large toolkit of reusable UI components. In this article, get a tour of the
new features and updates to this framework, which currently stands at version 3.1.
I was fortunate to be exposed to Ext JS for the first time in 2007 at a previous job.
When I began to dig in to the framework, I—like many others—found it difficult to
know where to begin. Although my colleagues had been using the framework since
version 1.1, we had recently upgraded to version 2.0, which introduced a complete
re-architecture of the framework. Thanks to the extensive collection of learning
resources, such as the Ext JS learning center, the community-created and
supported manual wiki site, and the very helpful forums, I was able to find the right
resources and get going quickly.

With the re-architecture of the framework complete, if you're just beginning with Ext
JS, you will have an easier road ahead. The latest release of the framework brings
another incredible crop of new features as well as updates that will make your
development life much simpler. This article reviews some of the more important and
useful updates to the Ext JS framework. If you're looking for a good introduction to
getting started developing with Ext JS, the article "Build applications with Ext JS"
(see Resources for a link) is a good place to start. Although it covers version 2.0,
these topics translate just fine to the current release.

Introducing Ext Core

The first big update to Ext JS 3.0 was the introduction of a new distribution called Ext
Core. Although this new distribution is merely an abstraction of the full Ext JS library,

What's new in Ext JS 3.0 Trademarks

© Copyright IBM Corporation 2010. All rights reserved. Page 1 of 10
developerWorks® ibm.com/developerWorks

it does bring a new mindset to development with Ext JS. Traditionally, developing
with Ext JS has been about taking advantage of its bread and butter: the UI
component framework. It is clearly one of the most advanced around and is miles
ahead of its competitors. However, what if I just need to sprinkle in some Ajax or
query and style a portion of the DOM? This is where Ext Core comes in. Meant to
serve as a competitor to other popular frameworks such as Prototype/script.aculo.us
and jQuery, Ext Core is a lightweight distribution containing all the, well, core
aspects you'd expect from a modern JavaScript framework. From element
augmentation and DOM querying to Ajax and utility classes, Ext Core has everything
you need to get started with advanced JavaScript development.

Ext JS has a history of confusion among developers that its licensing is closed and
expensive. Ext JS is a for-profit company and certainly supports different models
based on the intended use (open source, commercial, and OEM). However, the
framework has remained open source and continues to benefit from a large group of
community supporters who contribute user extensions and donate their time as
forum moderators. Ext Core continues this line of openness by being distributed
under the permissive and easily understood Massachusetts Institute of Technology
(MIT) license.

As I mentioned, one of the minor roadblocks I had to deal with when first starting
with Ext JS was the learning curve and where to begin. Ext Core makes things
easier with the creation of the Ext Core Manual. It's a concise and well-written
document that describes through example all the features this distribution has to
offer. Couple this with the other resources from the Ext JS learning center, and it's
clear that the documentation has matured.

Given the release of Ext Core, it's only natural that developers try to compare the
features of this new distribution with that of other popular frameworks such as
jQuery. jQuery is, by far, one of the most popular JavaScript frameworks on the
market, and deservedly so. However, there is one distinct advantage to using Ext
Core over other lightweight frameworks that I haven't seen discussed much. Using
Ext Core gives you the ability to become familiar with all the base functions of Ext
JS, allowing an easier transition to using the Ext JS library. Again, Ext JS is known
for its advanced UI component framework, and Ext Core gives the perfect
introduction.

Component updates and improvements

Although with each new release the Ext JS team seems to announce internal
memory enhancements and performance gains, the news that has the biggest
impact is the latest round of eye candy. I go through some of the more interesting
and important updates here.

Grids

What's new in Ext JS 3.0 Trademarks

© Copyright IBM Corporation 2010. All rights reserved. Page 2 of 10
ibm.com/developerWorks developerWorks®

All UI frameworks have a grid of some sort. It's the most desirable widget for
developing rich, Web-based applications. Ext JS has recognized this and added a
good deal of updates to its most important component.

The Ext JS grid has long supported the notion of editing field data directly in the grid.
Although this function is great, it was only supported at the field level. Available as a
user extension (UX) in Ext JS, you can now perform edits to a grid at the row level,
as shown in Figure 1.

Figure 1. Grid row editor

The next new grid feature saved me from a lot of work. I primarily work with the
Minimum Data Set (MDS), which is a file specification of the U.S. Centers for
Medicare and Medicaid Services. This file spec primarily represents the screening
and assessment tool for all residents of skilled nursing facilities certified to
participate in Medicare and Medicaid. As you can imagine, this government
specification is heavy and contains over 700 assessment fields. I was working on an
Ext JS project that would enable the browsing of all MDS assessment field metadata
in a grid, but I ran into some performance problems when scrolling through the
contents and resizing the panels. This is where the new grid BufferView saved
me. By swapping out the standard grid view for the buffered view, the application
performed as it should by only changing a line or two of code. The BufferView
works by rendering only the cells of the grid that are visible, so instead of constantly
having to render over 700 rows of data with each resize of my layout, it was only
doing a fraction of the work. This feature is also a UX and marked as experimental;
however, its usefulness was enough for me to take the risk and use it in my internal
application.

What's new in Ext JS 3.0 Trademarks

© Copyright IBM Corporation 2010. All rights reserved. Page 3 of 10
developerWorks® ibm.com/developerWorks

The last two updates to the grid that I'm going to cover are simple, yet useful.
Through the use of UXs, it is now possible to lock columns in a grid as well as group
grid columns. Column locking is useful for when you want to freeze a column or
collection of columns while scrolling and reviewing data in the other columns. To
enable column locking, you need to implement the LockingColumnModel and
LockingGridView elements, as shown in Listing 1.

Listing 1. Grid column locking

// grid which supports column locking

// just need to specify the locking version of the column
model and grid view
var grid = new Ext.grid.GridPanel(
{
store: dinnerData,
colModel: new Ext.ux.grid.LockingColumnModel( [
{ header: "Name", dataIndex: "name", id: "colName"
},
{ header: "Arrival Date", dataIndex: "arrivalDate"
},
{ header: "Dinner Choice", dataIndex: "dinnerChoice"
}
] ),
view: new Ext.ux.grid.LockingGridView(),
title: "Event Planner",
width: 350,
height: 250
}
);

The result is shown in Figure 2.

Figure 2. Grid column locking

What's new in Ext JS 3.0 Trademarks

© Copyright IBM Corporation 2010. All rights reserved. Page 4 of 10
ibm.com/developerWorks developerWorks®

Grouping column headers gives a clearer and more flexible representation of grid
data. Figure 3 provides an example.

Figure 3. Grid grouped column headers

Charting

Another big and completely new feature to Ext JS is charting. Based on the YUI
Library's charting engine, Ext JS charts are Adobe Flash-based. They leverage the
power of Ext JS data stores, a common object in the library used for linking data to
other popular UI components, such as grids. With support for chart types such as
line, column, pie, and stacked bar, Ext JS charts can find a place in most
applications. However, for more advanced chart implementations, consider
implementing more mature charting engines such as those found in Adobe Flex.
Figure 4 provides a demonstration of three of the available charts in Ext JS.

Figure 4. Charts sampler

What's new in Ext JS 3.0 Trademarks

© Copyright IBM Corporation 2010. All rights reserved. Page 5 of 10
developerWorks® ibm.com/developerWorks

Layouts

Other great additions to Ext JS are the HBox and VBox layouts and the ListView
control. The HBox and VBox are simple horizontal and vertical layout managers that
are overdue. With good support for spacing and alignment configurations, these
layouts are similar to layouts supported in other rich application frameworks such as
Flex and Microsoft® Silverlight.

The ListView control is a lightweight control with a grid view. It has support for
templates so that you can render data as you see fit while also supporting the basic
grid features you'd expect, such as column resizing. Although it also supports a
selectable interface, it does not support horizontal scrolling or editing. Figure 5
provides an example of the ListView control.

Figure 5. ListView sample

What's new in Ext JS 3.0 Trademarks

© Copyright IBM Corporation 2010. All rights reserved. Page 6 of 10
ibm.com/developerWorks developerWorks®

Toolbars, menus, and forms

Toolbars received two key updates that I think are pretty cool. The first is the
enabling of automatic handling of toolbar item overflow. When a container is resized
so that a toolbar's items are clipped, Ext JS automatically handles this overflow by
creating a menu of the extra toolbar items. This feature is simple but useful, because
you don't have to think about handling it yourself. Toolbars can now also group
buttons, forming the basis for ribbon-based toolbars. Buttons can be a mix of many
different types and can support various layouts.

Forms received a new field type in the ux namespace named SpinnerField.

Although this extension has been around for a while, Ext JS shipped this as part of
their example suite in Ext JS 3.0. It's a great addition that allows for spinning through
numbers, dates, and times as well as any other array-based data.

This section doesn't nearly cover all the updates to the Ext JS component
framework. For complete coverage, check out Resources.

Ext Direct
You wouldn't typically expect a JavaScript framework to be too concerned with the
server side of things, but the new Ext.Direct package aims to make
communication between the client and server much cleaner and more efficient.

Ext Direct can enable the invocation of server-side methods as if they were on the
client. You do this by implementing any of the many server-side stacks that route the
client request to the appropriate method. A great aspect of this type of development
is that you can swap out the server-side technology and not have to update your
JavaScript code.

What's new in Ext JS 3.0 Trademarks

© Copyright IBM Corporation 2010. All rights reserved. Page 7 of 10
developerWorks® ibm.com/developerWorks

Ext Direct also leverages Ext JS data stores and reduces boiler plate code,
particularly with creating and handling Ajax requests. You can configure a
DirectStore with an Ext Direct method and not have to worry about the details.

Ext Direct is a big topic all on its own. For more details, see Resources.

Theming
With all the great improvements to Ext JS, there is still a missing piece. There has
never been an easy way to create custom themes in Ext JS, and this continues to be
a disappointment. Although the CSS framework has been broken up into structural
and visual bits, it does not address the need for a way to create the images used in
the visual rendering of Ext JS components. Creating a theme for Ext JS 3.0 is more
straightforward than in previous versions, but because components are
image-heavy, it leaves the solution half-done.

Improvements in the 3.2 release

Although this article addresses Ext JS 3.1, the recent release of Ext JS 3.2 deserves
a mention for some of the cooler features. The first key feature is the ability to sort
and filter on multiple stores. I have been a part of Ext JS projects in the past where I
wished for this feature, but didn't have enough time to do it myself. I think this will be
a good new core addition to the framework.

Another feature that is wonderful is the composite form field. There have been many
times where I have struggled to lay out several fields on the same row using
traditional means but come up short, or the process created code that was difficult to
maintain.

The final feature to mention in the Ext JS 3.2 release is the accessibility theme. Ext
has been hard at work introducing accessibility features into the framework, and this
is a big one. It has a large font over a high-contrast design.

Conclusion
One of the more attractive traits I can assign to a technology is how well it can
support all the different tasks I might want to give it. Whether I need to hack up a
prototype quickly, sprinkle in some Ajax, or build a brand-new custom framework,
Ext has always pulled through nicely.

What's new in Ext JS 3.0 Trademarks

© Copyright IBM Corporation 2010. All rights reserved. Page 8 of 10
ibm.com/developerWorks developerWorks®

Resources
Learn
• "Build applications with Ext JS" (developerWorks, July 2008): Get a good
introduction to Ext JS.
• "Integrating Flex into Ajax Applications" (developerWorks, July 2008): Learn
about the interaction between Adobe Flex charts and Ext JS.
• Ext JS 3.1 samples and demos: Find samples and demonstrations of all the
new component features.
• Ext JS: Visit the Ext JS site.
• Ext Core: Learn more about Ext Core.
• Ext Core Manual: This manual is a fantastic resource for Ext Core.
• Ext Direct: Learn more about Ext Direct.
• Ext JS Learning Center: Visit the learning center, and find the resources you
need to use Ext JS effectively.
• Ext JS forums: Read the latest from the Ext JS community.
• developerWorks Web development zone: The Web development zone is
packed with tools and information for Web 2.0 development.
• developerWorks technical events and Webcasts: Stay current with the latest
technology.
Get products and technologies
• IBM trial software for product evaluation: Build your next project with trial
software available for download directly from developerWorks, including
application development tools and middleware products from DB2®, Lotus®,
Rational®, Tivoli®, and WebSphere®.
Discuss
• developerWorks blogs: Check out our blogs and get involved in the
developerWorks community.

About the author

Brice Mason

What's new in Ext JS 3.0 Trademarks

© Copyright IBM Corporation 2010. All rights reserved. Page 9 of 10
developerWorks® ibm.com/developerWorks

Brice Mason is a husband and father from upstate New York. He is also
a developer at Equip For Quality, where he works on a team developing
the next generation of health care analytics software for the long-term
care industry. You can reach Brice at bmason@equipforquality.com.

What's new in Ext JS 3.0 Trademarks

© Copyright IBM Corporation 2010. All rights reserved. Page 10 of 10