Tree Grid, Grouped Headers and Aggregation Rows

 The Ext team is pleased to announce the availability of Ext GWT 2.0 M3. M3 will be the last milestone release. We will be releasing a release candidate before the final release of Ext GWT 2.0. Many thanks to the early adopters in the community that have been using 2.0 and reporting bugs.

Ext GWT 2.0 M3 contains several new features and components.

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.

Column Grouping

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.

Aggregation Rows

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

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:

TreeGrid

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

When using ImageBundles, you create classes that extends ImageBundle. Here is a partial look of the new XImages class, which is the ImageBundle GXT uses for all it’s icons:

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

One immediate benefit we have noticed, is that the icons display immediately when first displayed in the application, rather than incrementally as a page loads. This happens since all the images are combined into one on the server at compile time, and therfore, 1 http request. While we are talking about it, here is a sreenshot of the image GWT generates from the individual icons we specified in our XImage class:

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

With 2.0, the “binders” and their wrapped widgets have been deprecated. Don’t confuse “binders” with our data binding code, which is something different. As mentioned above, Tree, TreeItem, TreeBinder TreeTable, TreeTableItem, and TreeTableBinder have been deprecated. In addition, DataList, DataListItem, and DataListBinder have been deprecated in favor of the existing ListView component which binds directly to a ListStore. With these changes, all of our data bound components have the same design, using stores and models. There are equivalents to every function and feature the deprecated functions provided, so there’s a smooth upgrade path.

 

Posted by sqlwang in ext js, javascript
4 十一月

评论暂缺 »

还没有任何评论。

留下评论