Getting started with ExtJS in your J2EE project

This tutorial will walk through how to get an Ext JS installation up and running quickly in your java (J2EE) project.

Level: Basic

This is the screenshot of this tutorial:


First, if you haven’t downloaded ExtJS already, do it: (most current release).

PS.: I’m using Eclipse IDE.

1 – After download the ExtJS library, let’s create a Dynamic Web Project.

2 – Under WebContent folder, create a folder where all ExtJS files will be located (I named it ext-3.0.3). Paste adapter and resources folders under your extjs folder. Also, paste this file:  ext-all.js under ext-3.0.3:


3 – Let’s create a html page. You can use this page as a template and adjust it to your needs:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

	<!-- Ext relies on its default css so include it here. -->
  	<!-- This must come BEFORE javascript includes! -->
	<link rel="stylesheet" type="text/css" href="/extjs-helloworld/ext-3.0.3/resources/css/ext-all.css" />

	<!-- Include here your own css files if you have them. -->

	<!-- First of javascript includes must be an adapter... -->
	<script src="/extjs-helloworld/ext-3.0.3/adapter/ext/ext-base.js"></script>

	<!-- ...then you need the Ext itself, either debug or production version. -->
	<script src="/extjs-helloworld/ext-3.0.3/ext-all.js"></script>

	<!-- Include here your extended classes if you have some. -->

  	<!-- Include here you application javascript file if you have it. -->

	<title>Getting Started with Extjs</title>

	<!-- You can have onReady function here or in your application file. -->
  	<!-- If you have it in your application file delete the whole -->
  	<!-- following script tag as we must have only one onReady. -->

	<script type="text/javascript">

	// Path to the blank image must point to a valid location on your server
	Ext.BLANK_IMAGE_URL = '/extjs-helloworld/ext-3.0.3/resources/images/default/s.gif';




4 – Now, let’s put a Hello World code to make sure everything is ok:

		Ext.Msg.alert('Test Extjs', 'Hello World');

You can download the source code in my Github: public

Reference: Ext Js Community

Happy Coding!

3 thoughts on “Getting started with ExtJS in your J2EE project

  1. Pingback:

Comments are closed.