Building a RESTful Web Application with JAX-RS and extjs (Part 2)


This is the continuation of Building a RESTful Web Application with JAX-RS and extjs . In the first post the Web Service was created. This post is about consuming the Web Service with extjs.

Here are the steps:

Create a new folder scripts below the web folder. Click Strg+N and select the category “Other“ and the file type “Folder“. Click Next.

Enter “scripts“ as the folder name and select “web“ as the parent folder. Click “finish”.

Download the extjs library from here: and unpack the zip file on your hard disk.

Create a new sub folder “extjs” below the scripts folder you‘ve created in step 1 and copy the necessary extjs library files in there. After copying you should have the following project structure.

Create a new java script file named “PersonGrid.js” in the scripts folder. Define a new class called PersonGrid which represents the data table. Here is the code:

PersonGrid = function(viewer, config) {
this.viewer = viewer;
Ext.apply(this, config);

this.limit = 20; = new{
root: 'person',
idProperty: 'id',
totalProperty: 'count',
paramNames: { start: 'start', limit: 'max' },
fields:['id', 'name1', 'name2', 'address1', 'address2',
'postalCode', 'city', 'country'],
restful: true,
remoteSort: true,
proxy: new{
url: 'resources/people',
headers: {
'accept': 'application/json'

this.columns = [{
header: "Firstname",
dataIndex: 'name1',
width: 100
}, {
header: "Surname",
dataIndex: 'name2',
width: 100,
}, {
header: "Street",
dataIndex: 'address1',
width: 200,
}, {
header: "Province",
dataIndex: 'address2',
width: 100,
hidden: true
}, {
header: "Postal code",
dataIndex: 'postalCode',
width: 80,
}, {
header: "City",
dataIndex: 'city',
width: 100,
}, {
header: "Country",
dataIndex: 'country',
width: 100,

this.bbar = new Ext.PagingToolbar({
pageSize: this.limit,
displayInfo: true,
displayMsg: 'Displaying people {0} - {1} of {2}',
emptyMsg: "No people to display"
});, {
title: 'Addressbook',
width: 800,
height: 400,
loadMask: {msg:'Loading People...'}

Ext.extend(PersonGrid, Ext.grid.GridPanel, {
load: function() {{params: {max: this.limit}});

The code defines a new sub-class of GridPanel. A grid panel consumes data from a Store. In this code a GridPanel is defined which shows a list of people. It gets its data from the “PeopleResource” Web Service that is bound to the following uri: “resources/people”. The next lines of code declares the columns of the grid. The value of dataIndex defines which data element is shown in a column. The PagingToolbar provides the paging support for the grid.

Modify the index.jsp file in the “Web Pages” folder as follow:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" type="text/css" href="scripts/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="scripts/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="scripts/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="scripts/PersonGrid.js"></script>
<script type="text/javascript">

var grid = new PersonGrid();
<div id="person-grid"></div>

Goto Run->Run Project (or press F6) to deploy the project to the application server. Now you should see the grid showing the first 10 rows of the sample data.

That‘s it. What‘s missing? – The Web Service doesn‘t support remote sort yet.


Marco Rico Gomez is a passionate software developer located in Germany who likes to share his thoughts and experiences about software development and technologies with others.

blog comments powered by Disqus