Published Feb 09, 2011 | Darrell Meyer | Tutorial | Easy
Last Updated Jul 11, 2011

How to get started?

Add the following entry to you projects module xml file.

<inherits name='com.extjs.gxt.ui.GXT'/>

Add the following stylesheet to your host page.

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

Eclipse Setup (should be similiar for other development enviornments) These instructions assume you have a existing project and launch confifuration.

• Add gxt.jar to the project.

1. Right click on project name in 'Package Explorer'.
2. Select 'Properties' from content menu.
3. Select 'Java Build Path'.
4. Select 'Libraries' tab.
5. Add the gxt.jar either with 'Add JARs...' or 'Add External JARs...'.

• Add GXT jar to launch configuration.

1. Choose Run / Open Run Dialog.
2. Select your appropriate launch configuration under 'Java Application'.
3. Select the 'Classpath' tab.
4. Add the gxt.jar to the classpath.

Place only the following code snippet within the onModuleLoad in a GWT application:

public void onModuleLoad() {
 ContentPanel cp = new ContentPanel();
 cp.setHeading("Folder Contents");
 cp.setSize(250,140);
 cp.setPosition(10, 10);
 cp.setCollapsible(true);
 cp.setFrame(true);
 cp.setBodyStyle("backgroundColor: white;");
 cp.getHeader().addTool(new ToolButton("x-tool-gear"));
 cp.getHeader().addTool(new ToolButton("x-tool-close"));
 cp.addText("BogusText");
 cp.addButton(new com.extjs.gxt.ui.client.widget.button.Button("Ok"));
 cp.setIconStyle("tree-folder-open");
 RootPanel.get().add(cp);
 cp.layout();
}

What is the required doctype

Ext GWT will support all doctypes supported by GWT

How to refresh a tree?

Use TreeStore.add(M parent, M item, boolean addChildren), TreeLoader.loadChildren(parent) or TreeLoader.load()

Why can't I only add Fields to a FormPanel?

FormPanel has a FormLayout which only renders Fields. If you want to use other widgets, use AdapterField

How to handle selection events on a Tree?

Use TreeBinder.addSelectionChangedListener(..)

How to build a simple Tree with strings?

Just manually add the items, using TreeItem.add(TreeItem), starting with tree.getRootItem().

I have different behaviours in Internet Explorer and Firefox, is it a Ext GWT bug?

Make sure no other stylesheets are loaded that might conflict with Ext GWT - ie only have css/ext-all.css

How do I explicitly listen for mouse clicks on a widget?

widget.sinkEvents(Event.ONCLICK);
     widget.addListener(Events.OnClick, new Listener<DomEvent>() {
       public void handleEvent(DomEvent be) {
         System.out.println("Clicked!");
       }
     });

In some cases, you can add a selection listener to a widget instead of listening for mouse clicks.

How can I stop an event from continuing (ie beforeXXXX event)?

event.doit=false;

How do I stop a window from closing and ask "Are you sure"?

Use the event.doit=false in a window listener and then add/remove that listener depending on the answer.

Can I use GWT widgets in GXT?

Yes you can.

I've add widgets to a panel, but they don't show up - why?

Call layout() on the panel.

How to create custom components?

You can extend Component, BoxComponent for a sized component, Container for a "layouted" component when you don't want to expose the layout and LayoutContainer for a "layouted" component when you want to expose the layout.