Blog

Ext GWT 2.0 Released

July 09, 2009 | Darrell Meyer

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

• 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

 
    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));
 

 
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

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

/**
 * 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);
}

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