Blog

Tree Grid, Grouped Headers and Aggregation Rows - Ext GWT 2.0 M3 Released

June 15, 2009 | Darrell Meyer

Ext GWT 2.0 M3 contains several new features and components.

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

Tree Panel & Tree Grid

With the M3 release there are some exciting changes.

M3 introduces the TreePanel component. TreePanel binds directly to a TreeStore and replaces Tree, TreeItem, TreeBinder. Even more exciting, the new TreeGrid replaces TreeTable, TreeTableItem, and TreeTableBinder.

This new design gives you all the benefits and features of Grid - fast rendering, widget support, and inline editing - with the additional features of widget support previously found in Table. Grid now supports placing widgets in cells using a GridCellRenderer.

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

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

 
public interface XImages extends ImageBundle {
  @Resource("hmenu-asc.gif")
  AbstractImagePrototype grid_sortAsc();
 
  @Resource("hmenu-desc.gif")
  AbstractImagePrototype grid_sortDesc();
  ....
}
 

Binders Deprecated

Ext GWT 1.0 included a set of "binders" classes that added store and model support to widgets. With the binders, you worked with stores and models, rather than widgets directly such as TreeItem's and TableItem's. With binders, there is the wrapped widget, the wrapped widget's child widget, and the binder itself:

• Tree & TreeItem with TreeBinder
• TreeTable & TreeTableItem with TreeTableBinder
• Table & TableItem with TableBinder
• DataList & DataListItem with DataListBinder

Upgrading

We are offering a pre-release sale with hefty discounts to upgrade your 1.x license. If you've thought about purchasing an Ext License, for a limited time, you can purchase online for less than an Ext GWT 1.x License. There's no better time to support the Ext team.