Ext

The Ext Team is happy to announce the availability of Ext GWT 2.0 available for immediate download. Ext GWT 2.0 is packed full of new components and features, expanding on the Ext GWT 1.0 feature set. Most notably, Ext GWT has closed the feature gap that once existed between its sister project Ext JS. Developers looking to use Ext GWT can now rest easy knowing that they are not missing out on any cool features.

Thanks to community for testing and reporting bugs with our 2.0 preview releases. With this help, we are able to ensure a stable and robust release.

New Components & Features

With 2.0 comes several new components and features including the following:

• TreePanel
• TreeGrid
• Charting
• HtmlEditor (with ColorPalette)
• RowEditor
• Widget Renderer Grid
• ButtonGroup
• Status
• HBoxLayout & VBoxLayout

Tree Panel & Tree Grid

2.0 introduces the TreePanel and TreeGrid component. TreePanel and TreeGrid bind directly to a TreeStore and replaces Tree and TreeTable. Since these two components bind directly to a TreeStore, the TreeBinder and TreeTableBinder binders are no longer needed. TreeGrid is Grid subclass which means it gives you all the benefits and features of Grid – fast rendering, widget support, and inline and row based editing.

The following screenshot is of the new TreeGrid using a RowEditor:

Live Charting

The chart package will allow you to visualize your data with flash based charting. Each chart binds directly to a ListStore. The new FlashComponent class, which extends BoxComponent, allows you to easily create custom Flash Components. By binding the charts directly to a ListStore, you don’t have to worry about updating your chart, they will update automatically. Included is a full Java object model for configuring and constructing the charts, no need to mess with JSON or XML.

HTML Editor – Rich Text Editor

The often requested components is now available. HtmlEditor is a lightweight WYSIWYG editor that integrates well with the other Ext components. The HtmlEditor component is easy to customize with other features you may need.

RowEditor

Editing a row in a grid just got a lot easier. The RowEditor is another great new UI component allowing you to rapidly edit full rows in a grid. You can even enable a validation mode which uses the new AnchorTips to notify the user of all validation errors at once.

Widget Renderer

It is now possible to add widgets to cells in Grid. To use widgets, simply use a GridCellRenderer and return a widget, rather than a HTML fragment.

ButtonGroup

ButtonGroup is a new component that will allow you to group together Buttons of different sizes to create complex toolbars enabling your users to find the most common actions first.

Status

The new Status component can be used with a ToolBar to replicate the status area of an application.

HBoxLayout & VBoxLayout

Two new and extremely flexible layouts for layout out children in a single row or column. Box layouts allow precise control of the size and position of the children in a container.

Enhanced Components & Features

• Grid
• Buttons
• Toolbar Overflow
• Menu Overflow
• AnchorTips
• Buffered GridView
• ImageBundle

Grid Enhancements

We have added two new features we hope you will enjoy. First is column grouping, which allows multi-row headers with colspan and rowspan support. In addition, widgets can be added to the headers.

The follow code creates the two rows of column groups:

    cm.addHeaderGroup(0, 0, new HeaderGroupConfig("Header Grouping Example", 1, 5));
    cm.addHeaderGroup(1, 2, new HeaderGroupConfig("Stock Performance", 1, 2)); 
    cm.addHeaderGroup(1, 0, new HeaderGroupConfig(yourWidget, 1, 2));

The second enhancement is aggregation rows. One to many rows can be added to the bottom of a Grid. You can specify one of the predefined aggregations types, such as max, min, and avg, or use renderers to display any data.

The following code creates a single aggregation row:

AggregationRowConfig<Stock> averages = new AggregationRowConfig<Stock>();
averages.setHtml("name", "Average");
 
// with summary type and format
averages.setSummaryType("last", SummaryType.AVG);
averages.setSummaryFormat("last", NumberFormat.getCurrencyFormat());
 
// with renderer
averages.setSummaryType("change", SummaryType.AVG);
averages.setRenderer("change", new AggregationRenderer<Stock>() {
  public Object render(Number value, int colIndex, Grid<Stock> grid, ListStore<Stock> store) {
    // you can return html here
    return number.format(value.doubleValue());
  }
});
cm.addAggregationRow(averages);

Buttons

Buttons in Ext GWT 2.0 have been refactored to be a valid BoxComponent which enables them to partake in layout management. Buttons can now scale to any height or width and have advanced text positioning.

Toolbar Overflow

Toolbars can now create a menu for items that don’t fit the visible toolbar area. The items in the menu still react with the same handlers as the toolbar items. This new behavior is turned on by default and can be disabled with the configuration option enableOverflow.

Menu Overflow

Menus now also handle overflowing in a more gracious manner. Whenever a menu gets so long that the items won’t fit the viewable area, it provides the user with an easy UI to scroll the menu. This feature is turned on by default and can be disabled by the configuration option enableScrolling.

ToolTips

Tooltips now support an anchor configuration which will allow you to bring attention to a particular element or component with a small callout arrow.

Buffered GridView

Buffered GridView enhances performance by waiting to render rows until they are visible. As your user scrolls away from content which is no longer visible, the BufferedGridView will clean up the old DOM markup to minimize the DOM structure. As a result of the smaller markup, the performance of resizing, forceFit, autoExpandColumn and other layout and DOM manipulation features in a large grid will improve substantially. Buffer GridView is limited to working on fixed height rows.

ImageBundle Support

ImageBundle support has been an often requested feature. With M3, we have added ImageBundle support. Icons can be specified in three different methods:

• AbstractImagePrototype (typically from an ImageBundle)
• CSS style name (existing method)
• Image path (String)

All components that support icons now implement the new IconSupport interface:

/**
 * Interface for objects that support icons.
 */
public interface IconSupport {
  /**
   * Returns the icon.
   * 
   * @return the icon
   */
  public AbstractImagePrototype getIcon();
 
  /**
   * Sets the icon.
   * 
   * @param icon the icon
   */
  public void setIcon(AbstractImagePrototype icon);
 
  /**
   * Sets the icon style.
   * 
   * @param icon a CSS style name
   */
  public void setIconStyle(String icon);
}

In addition, there is a helper class, IconHelper, that can be used to create image prototypes from CSS style names, and image paths. Here is an example setting an icon 3 different ways:

    // from bundle
    item.setIcon(GXT.IMAGES.editor_bold());
    // CSS style name
    item.setIconStyle("my-icon");
    // image path
    item.setIcon(IconHelper.createPath("/my/url/foo.gif"));

Upgrading

Ext GWT 2.0 is a major upgrade from 1.0. There are a number of breaking changes to consider when moving from 1.X. There is a migration guide in the Ext GWT download which documents the API changes. Make sure to take a look at this before you begin upgrading to 2.0.

Ext GWT 2.0 is available on our download page. We have updated our roadmap to show the new features we are targeting for release 2.1.

This entry was posted on Thursday, July 9th, 2009 at 8:55 am and is filed under Ext GWT. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.