Ext GWT 2.0 Released

July 9, 2009 by 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

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.

Mike says:

July 9, 2009 at 10:35 am

We want the rails RJS version too like this http://lipsiadmin.com !!!

Mark Macumber says:

July 9, 2009 at 6:34 pm

Excellent job guys, I cant wait to get my hands real dirty using these new features. Although, I would like, perhaps instead of slabs of example code, some full documentation on the widgets, sometimes it takes a while to piece together the code examples…

Rob says:

July 10, 2009 at 4:51 am

The demo for Tree Grid is broken.
Rob

Darrell Meyer says:

July 10, 2009 at 1:14 pm

Rob – I do not see any issue with the TreeGrid examples. Can you give more information about the problem you are seeing (which demo, browser, etc)?

Jacob says:

July 11, 2009 at 3:40 am

For the TreeGrid examples, if you expand nodes and then click on a column header to sort by, it collapses the Tree. If you sort by clicking on the down/more arrow, then they are left open. I believe this is happening in IE7, Chrome, etc.

jv says:

July 17, 2009 at 9:14 am

Amazing work guys, thank you!

Not as popular as Ext for JS, but I can’t imagine managing my current project in JavaScript, without static typing and the code “self-awareness” that Java/Eclipse provides. It would be possible, but much more time consuming and error prone.

Mike Chaliy says:

July 19, 2009 at 9:17 am

Hate to ask you, but do you guys plan to publish this release to Maven?

extjs says:

July 26, 2009 at 1:48 am

업그레이드 됬나보넹..

extjs도 언능 전용 개발툴좀 나왔으면 좋으련만. –ㅋ

Oz says:

July 31, 2009 at 5:50 pm

Is there gonna be a Facebook style tag input UI element soon ?

sağlık personeli says:

August 3, 2009 at 5:28 am

Thanks to community for testing and reporting bugs with our 2.0 preview release

aksaray üniversitesi says:

August 3, 2009 at 5:29 am

thank but do you guys plan to publish this release to Maven?

Matt Raible says:

August 7, 2009 at 11:30 am

For those that’ve asked about Maven, the 2.0.1 release is now in the central repository.

http://repo2.maven.org/maven2/com/extjs/gxt/2.0.1/

Bird Toys says:

August 9, 2009 at 7:27 pm

Great work.

replica jersey says:

August 21, 2009 at 8:20 am

You have done a great job,guys！Cheers

Billy Bones says:

August 27, 2009 at 2:32 pm

Thank you Darrell for your job.

Let me ask you as a guru

What do you recommend as general approach in showing data in your “binding” widgets from “lookup” objects? Invoice Payer and Buyer names for example in model with associations: Invoice object to 2 objects of Customer and getName() method?

Tnx

nigel says:

September 9, 2009 at 2:51 am

just look at the demos, the charts don’t seem to be working.

Ben says:

September 9, 2009 at 11:18 am

Very keen to use GXT for a commercial project – do you have an estimated timescale for implementation of column reordering in GXT grids? This is the one piece of missing functionality for us.

Forex says:

September 16, 2009 at 5:56 am

Looking forward to test out the demo.. Looks GREAT!

Abhishek says:

September 16, 2009 at 8:19 am

Want to know about creating a custom widget on top of GXT widgets and not able to find any doc for that. Any help/doc on this will be of great use.

santa luzia says:

October 18, 2009 at 11:41 pm

Bernadette says:

October 20, 2009 at 11:55 am

Great job guys! Thanks for the tutorial as well, was a great help for me.

Andrey says:

November 5, 2009 at 10:37 am

Buttons can no longer be added to ButtonBar? In all examples I see
# ButtonBar buttonBar = new ButtonBar();
# buttonBar.add(new Button(“Click Me”, listener));
but there seems to be no add(Button) method in ButtonBar (due to API documentation).

I am new to GXT, so am I doing anything wrong, or when are examples going to become up-to-date?