Tree Grid, Grouped Headers and Aggregation Rows – Ext GWT 2.0 M3 Released
June 15, 2009 by Darrell Meyer
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.
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);
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
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.
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.
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.
Posted on June 15th, 2009 at 1:04 pm
Love the grouped headers and bundled images – nice work Darrell!
Posted on June 15th, 2009 at 1:10 pm
I’d love to see this enhancements in ExtJS as well!
Posted on June 15th, 2009 at 1:25 pm
Thanks for the quick replies on the bugs wich i’ve commited!
The 2.0 releases are a big step in the maturity of the library.
Posted on June 15th, 2009 at 2:10 pm
Good lord this is sweeeeeeeeeeeeet.
Posted on June 15th, 2009 at 2:10 pm
Column grouping and row aggregation are what we have been waiting for!
Posted on June 15th, 2009 at 4:13 pm
Wow.
Posted on June 15th, 2009 at 5:22 pm
Imagebundle support at last!!
(i have been asking this since the old mygwt days)
Posted on June 15th, 2009 at 7:34 pm
最近ext发布的真快，每次来都有新东西
Posted on June 16th, 2009 at 2:35 am
Still missing the column reorder feature which was promised as part of 2.0 release!!!
Posted on June 16th, 2009 at 6:25 am
Simply stunning guys.
Posted on June 16th, 2009 at 6:54 am
Column grouping, row aggregation and bundled images are not included in the regular ExtJS javascript library. I thought ExtGWT was a layer above the ExtJS javascript library API?
Posted on June 16th, 2009 at 8:05 am
Same for us, Ates!
This is a hell of a nice release.
Posted on June 16th, 2009 at 8:26 am
“I thought ExtGWT was a layer above the ExtJS javascript library API?”
No, Ext GWT is a Widget library on top of GWT. It is completly written in Java and has no part of the Ext JS library in it.
Sven
Posted on June 16th, 2009 at 5:23 pm
Please make it also available for ExtJS!
Posted on June 17th, 2009 at 1:44 am
Great Work! I love GXT
Posted on June 17th, 2009 at 2:22 am
Hi, I’m sure that you know but I want to mention that, in Slate theme, RowEditor’s Save Cancel buttons’ text are not displayed before clicking to them.
If this is not the place for writing bugs, I’m sorry 
PS: I love all new widgets and attributes, they are great, thanks.
Posted on June 17th, 2009 at 9:36 am
What? these goodies are not in regular extjs?
Posted on June 17th, 2009 at 3:58 pm
Very Impressive. I really enjoyed playing with the examples. Nice work.
Posted on June 18th, 2009 at 7:46 am
You can implement the grouped headers etc in ExtJs using the plugins – though – they do tend to be slightly buggy in some instances – and for this reason I think it would be excellent if the ExtJs team put some work into turning some of the plugins into supported extensions to the framework.
Things like grouped headers, multi levels of grouping, group summaries/headers etc make this framework a real gem – it’d be amazing if these plugins were made more solid-less buggy.
w://
Posted on June 19th, 2009 at 3:56 am
GWT，非常期待你的GA版本。。。
Posted on June 20th, 2009 at 1:52 am
Fantastic work as ever guys!
Would it be possible to add a row header and aggregation columns with the same functionalities of the column grouping headers and the aggregation rows you have implemented? The row header should be able to span across multiple rows (on the left before the “data” area) and also allow colspan and rowspan support…
Keep up the good work!
Posted on June 22nd, 2009 at 10:35 am
Please make the Tree Grid a component in ExtJs.
Posted on June 22nd, 2009 at 11:20 pm
good!
Posted on June 23rd, 2009 at 12:56 pm
“Please make the Tree Grid a component in ExtJs.”
count me in on that!
Posted on June 23rd, 2009 at 10:07 pm
[...] 详情访问：http://extjs.com/blog/2009/06/15/tree-grid-grouped-headers-and-aggregation-rows-ext-gwt-20-m3-releas… ext ext 归类于 Java/互联网技术. Tags: Ext. [...]
Posted on June 25th, 2009 at 1:11 pm
“I thought ExtGWT was a layer above the ExtJS javascript library API?”
That’s GWT-Ext, not Ext-GWT.
The confusion is, of course, understandable.
Posted on June 27th, 2009 at 5:36 am
kabin üretim ve satış.
Posted on June 29th, 2009 at 7:49 am
TreeGrid doesn’t support expanding/collapsing nodes using keyboard.
How to deal with it?
Posted on June 29th, 2009 at 11:02 am
“TreeGrid doesn’t support expanding/collapsing nodes using keyboard.
How to deal with it?”
This feature was already added in SVN.
Posted on July 6th, 2009 at 10:02 am
[...] ExtJs recently posted a blog entry detailing some new features for Ext GWT. Certainly these new features are also in plain ole ExtJs. Here are some screenshots, but read the blog entry for more details:Ext JS – Blog [...]
Posted on August 3rd, 2009 at 11:31 pm
看到中文真亲切~
Posted on November 13th, 2009 at 5:37 pm
How to deal with it?