Ext JS - Learning Center

Ext GWT FAQ

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Contents

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" />

Ext GWT requires no doctype or the following doctype (quirksmode). 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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(getBogusText());
 cp.addButton(new Button("Ok"));
 cp.setIconStyle("tree-folder-open");
 RootPanel.get().add(cp);
 cp.layout();
}

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?

First, check that you have the good doctype declaration in your HTML main file : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Second, 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.

Retrieved from "http://www.extjs.com/learn/Ext_GWT_FAQ"
  • This page was last modified on 13 June 2009, at 11:56.
  • This page has been accessed 8,435 times.