Sencha GXTThe Java Framework

Build enterprise web apps in pure Java.

GXT is a comprehensive Java framework for building web apps with the GWT compiler. Write your UI in Java and compile it into highly optimized, cross-platform HTML5, with 140+ high-performance components ready to use.

GXT 4.2Java 11 · 17 · 21 LTSGWT 2.11.0

mavencom.sencha.gxt:gxt:4.2.0Copy

Start Free 30-Day TrialBuy NowExplore documentation

4.1/5 on G2

10,000+ enterprise customers, including 60% of the Fortune 100

Quick Start Guide

Download the SDK and add it to your Build Path. Full guide

1Add the jars2App.gwt.xml3App.html4App.java

Project Build PathCopy

# 1. Download the GXT SDK (free trial or support portal) and unzip it
# 2. Copy the GXT jars into your project and add them to the Build Path
#    (next to the GWT SDK)

my-app/
  lib/
    gxt-4.2.0.jar                 # GXT components
    gxt-chart-4.2.0.jar           # optional: charts
    gxt-theme-triton-4.2.0.jar    # optional: Triton theme
  src/
  war/

Already a customer? Get GXT from the support portal.

Using Maven? Maven projects need MyGet access. Reach out to our sales team to get access.

4.1 / 5

Security & Compliance

20+

Years Of Excellence

Recognized By Leading Software Review Sites

60%

Of Fortune 100 Companies

500K

Active Forum Members

140+

Components

2M

Sencha Developers

7.2M

Product Downloads

10K

Customers Worldwide

Customer stories

Real companies, real results with GXT.

Control interface

“We couldn’t have created such a sophisticated control interface without Sencha GXT. We love using the Sencha product given the high level of abstraction …you really don’t have to be a web developer to use the product.”

Read story

Engineering data management

“CERN uses GXT to build the web interface of the EDMS system. It stores information about the design, manufacturing, testing, and maintenance of various pieces of equipment installed at CERN…”

Read story

Analytics platform

“Sencha GXT allowed us to take our years of large-scale app dev experience and transition to a high-performance, highly scalable, web-centric platform in a very short time. We’re able to give our users a great experience…”

Read story

# 1. Download the GXT SDK (free trial or support portal) and unzip it
# 2. Copy the GXT jars into your project and add them to the Build Path
#    (next to the GWT SDK)

my-app/
  lib/
    gxt-4.2.0.jar                 # GXT components
    gxt-chart-4.2.0.jar           # optional: charts
    gxt-theme-triton-4.2.0.jar    # optional: Triton theme
  src/
  war/

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to="app">
  <inherits name="com.google.gwt.user.User" />
  <!-- Remove GWT's Clean theme if your project has it -->
  <!-- <inherits name="com.google.gwt.user.theme.clean.Clean" /> -->

  <!-- GXT + the default GXT stylesheet -->
  <inherits name="com.sencha.gxt.ui.GXT" />
  <stylesheet src="reset.css" />
  <inherits name="com.sencha.gxt.theme.triton.Theme" />

  <entry-point class="com.example.client.App" />
  <source path="client" />
</module>

<!-- GXT needs the HTML5 doctype -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My GXT App</title>
    <script src="app/app.nocache.js"></script>
  </head>
  <body></body>
</html>

package com.example.client;

public class App implements EntryPoint {

  @Override
  public void onModuleLoad() {
    TextButton hello = new TextButton("Say hello");
    hello.addSelectHandler(event ->
        new MessageBox("GXT", "Hello from Java!").show());

    ContentPanel panel = new ContentPanel();
    panel.setHeading("My first GXT app");
    panel.add(hello);

    Viewport viewport = new Viewport();
    viewport.setWidget(panel);
    RootPanel.get().add(viewport);
  }
}

// Generated, type-safe accessors for the Stock bean
interface StockProperties extends PropertyAccess<Stock> {
  @Path("symbol")
  ModelKeyProvider<Stock> key();
  ValueProvider<Stock, String> name();
  ValueProvider<Stock, Double> last();
  ValueProvider<Stock, Double> change();
}

StockProperties props = GWT.create(StockProperties.class);

ColumnConfig<Stock, String> nameCol = new ColumnConfig<>(props.name(), 150, "Company");
ColumnConfig<Stock, Double> lastCol = new ColumnConfig<>(props.last(), 75, "Last");
ColumnConfig<Stock, Double> changeCol = new ColumnConfig<>(props.change(), 75, "Change");

List<ColumnConfig<Stock, ?>> columns = new ArrayList<>();
columns.add(nameCol);
columns.add(lastCol);
columns.add(changeCol);

ListStore<Stock> store = new ListStore<>(props.key());
store.addAll(stocks);

Grid<Stock> grid = new Grid<>(store, new ColumnModel<>(columns));
grid.getView().setAutoExpandColumn(nameCol);
grid.getView().setStripeRows(true);
grid.setColumnReordering(true);

// Remember column order, widths and sort between visits
grid.setStateful(true);
grid.setStateId("stockGrid");
new GridStateHandler<>(grid).loadState();

// Load pages of data from the server via GWT RPC
RpcProxy<PagingLoadConfig, PagingLoadResult<Post>> proxy =
    new RpcProxy<PagingLoadConfig, PagingLoadResult<Post>>() {
      @Override
      public void load(PagingLoadConfig config,
                       AsyncCallback<PagingLoadResult<Post>> callback) {
        service.getPosts(config, callback);
      }
    };

PagingLoader<PagingLoadConfig, PagingLoadResult<Post>> loader =
    new PagingLoader<>(proxy);
loader.setRemoteSort(true);

// Only fetch and render the rows the user can see
LiveGridView<Post> liveView = new LiveGridView<>();
liveView.setAutoExpandColumn(subjectColumn);

Grid<Post> grid = new Grid<>(store, columnModel);
grid.setLoader(loader);
grid.setView(liveView);
grid.setLoadMask(true);

// Once the grid is attached, load the first cache-sized block
loader.load(0, liveView.getCacheSize());

// Row editing: map each column to a field
GridRowEditing<Plant> editing = new GridRowEditing<>(grid);
editing.addEditor(nameColumn, new TextField());
editing.addEditor(availableColumn, new DateField());
editing.addEditor(indoorColumn, new CheckBox());

// Column-menu filters, applied locally
GridFilters<Plant> filters = new GridFilters<>();
filters.initPlugin(grid);
filters.setLocal(true);
filters.addFilter(new StringFilter<>(props.name()));
filters.addFilter(new DateFilter<>(props.available()));
filters.addFilter(new BooleanFilter<>(props.indoor()));

NumericAxis<Data> hits = new NumericAxis<>();
hits.setPosition(Position.BOTTOM);
hits.addField(access.data1());
hits.setDisplayGrid(true);
hits.setMinimum(0);

CategoryAxis<Data, String> months = new CategoryAxis<>();
months.setPosition(Position.LEFT);
months.setField(access.name());

BarSeries<Data> bars = new BarSeries<>();
bars.setYAxisPosition(Position.BOTTOM);
bars.addYField(access.data1());
bars.addColor(new RGB(148, 174, 10));
bars.setHighlighting(true);

Chart<Data> chart = new Chart<>();
chart.setStore(store);          // same ListStore your grid uses
chart.addAxis(hits);
chart.addAxis(months);
chart.addSeries(bars);
chart.setAnimated(true);

TextField name = new TextField();
name.setAllowBlank(false);

TextField email = new TextField();
email.setAllowBlank(false);

DateField start = new DateField();
start.addValidator(new MinDateValidator(new Date()));

TextArea notes = new TextArea();
notes.addValidator(new MinLengthValidator(10));

VerticalLayoutContainer form = new VerticalLayoutContainer();
form.add(new FieldLabel(name, "Name"), new VerticalLayoutData(1, -1));
form.add(new FieldLabel(email, "Email"), new VerticalLayoutData(1, -1));
form.add(new FieldLabel(start, "Start date"), new VerticalLayoutData(1, -1));
form.add(new FieldLabel(notes, "Notes"), new VerticalLayoutData(1, 100));

FramedPanel panel = new FramedPanel();
panel.setHeading("New contact");
panel.add(form);
panel.addButton(new TextButton("Save"));

BorderLayoutContainer shell = new BorderLayoutContainer();

BorderLayoutData westData = new BorderLayoutData(220);
westData.setCollapsible(true);
westData.setSplit(true);

shell.setNorthWidget(toolBar, new BorderLayoutData(40));
shell.setWestWidget(navigationTree, westData);
shell.setCenterWidget(grid, new MarginData());
shell.setSouthWidget(statusBar, new BorderLayoutData(28));

// Fill the browser window and resize with it
Viewport viewport = new Viewport();
viewport.setWidget(shell);
RootPanel.get().add(viewport);

TreeStore<FileNode> store = new TreeStore<>(props.key());
store.add(projects);
store.add(projects, Arrays.asList(src, docs, assets));

Tree<FileNode, String> tree = new Tree<>(store, props.name());
tree.setCheckable(true);
tree.setCheckStyle(CheckCascade.TRI);   // parents reflect children
tree.setAutoLoad(true);

tree.getSelectionModel().addSelectionHandler(event ->
    Info.display("Selected", event.getSelectedItem().getName()));

theme {
  name = "mytheme"
  basePackage = "com.example.theme.mytheme"
  details {
    buttonGroup {
      borderRadius = 3
      border = util.border('solid', '#dfeaf2', 3)
      headerGradient = util.solidGradientString('#dfeaf2')
      font = util.fontStyle("helvetica, arial, verdana", '13px', '#666666');
      ...
    }
    ...
  }
}