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.

Brice Mason, Senior Web Developer, Equip For Quality

Brice MasonBrice 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.



04 May 2010

Also available in Chinese Russian

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, 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

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
Screen showing fields can be selected and edited.

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
Screen showing 4 columns with scroll bars. The first column is locked and doesn't scroll.

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

Figure 3. Grid grouped column headers
Screen showing 2 subcolumns each under Canada and United States main headings.

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
Screen showing line, bar, and pie chart examples.

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
Screen with a name header and a list of names.

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.

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.

Resources

Learn

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

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=486916
ArticleTitle=What's new in Ext JS
publish-date=05042010