![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
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.
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, 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.
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.
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
Grouping column headers gives a clearer and more flexible representation of grid data. Figure 3 provides an example.
Figure 3. Grid grouped column headers
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
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
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.
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.
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.
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.
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.
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.
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.
Table of contents
Next steps from IBM
Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.
- Try: WebSphere Portal Express
- Article: Get started using Ajax and WebSphere Portal Express
- Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
- Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
- Buy: WebSphere Portal Express
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
