Getting started with GXT 3.1.x.

This tutorial is most relevant for GXT 3.1.

Getting started with an IDE

Choose the IDE and configuration style to get started with below.

Eclipse

IntelliJ IDEA

Getting started general configuration

Setting up GXT in general requires the library to be in the build path and configuring the GWT XML module.

Build path configuration

  • Add the GXT library to the project Build Path.

Jar configuration

Maven configuration

  • Add the GXT dependency to the pom.xml dependencies section.

    <project>
        <dependencies>
            <!-- GXT -->
            <dependency>
              <groupId>com.sencha.gxt</groupId>
              <artifactId>gxt</artifactId>
              <version>3.1.4</version>
            </dependency>
        </dependencies>
    </project>

GWT XML module configuration

Configure the GWT project to inherit the GXT module.

  1. Insert the GXT module into the project GWT XML module.

    <!-- Other module inherits -->
     <inherits name='com.sencha.gxt.ui.GXT' />
  2. Remove the built in style named Clean as it is not supported. The other styles Standard, Chrome and Dark will not conflict with GXT.

    <!-- <inherits name='com.google.gwt.user.theme.clean.Clean'/> -->
  3. Insert the reset.css stylesheet into the project GWT XML module.

    <!-- GXT Stylesheet -->
    <stylesheet src="reset.css" />
  • The GXT configuration in the Project GWT XML Module will look something like this:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE module PUBLIC "-//Google Inc.//DTD GWT 2.7.0//EN"
        "http://gwtproject.org/doctype/2.7.0/gwt-module.dtd">
    <module rename-to='gxt_project'>
      <!-- Inherit the core Web Toolkit stuff. -->
      <inherits name='com.google.gwt.user.User' />
    
      <!-- Other module inherits -->
      <inherits name='com.sencha.gxt.ui.GXT' />
    
      <!-- GXT stylesheet -->
      <stylesheet src="reset.css" /> <!-- Sets up the GXT default stylesheet -->
    
      <!-- Neptune Theme -->
      <inherits name="com.sencha.gxt.theme.neptune.Theme" />
    
      <!-- Specify the app entry point class. -->
      <entry-point class='com.sencha.gxt.project.client.GXT_Project' />
    
      <!-- Specify the paths for translatable code -->
      <source path='client' />
      <source path='shared' />
    </module>
Last updated