Getting started with ExtJS in your J2EE project

December 1, 2009 | By

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:

getting started extjs java 01 Getting started with ExtJS in your J2EE project

First, if you haven’t downloaded ExtJS already, do it: http://extjs.com/products/extjs/download.php (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:

getting started extjs java 02 Getting started with ExtJS in your J2EE project

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"
    pageEncoding="ISO-8859-1"%>
<html>
<head>

	<!-- 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';

	</script>

</head>
<body>

</body>
</html>

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

	Ext.onReady(function(){
		Ext.Msg.alert('Test Extjs', 'Hello World');
	});

You can download the source code in my Github: public Getting started with ExtJS in your J2EE project http://github.com/loiane/extjs-helloworld

Reference: Ext Js Community

Happy Coding!

Filed in: ExtJS | Tags: , , ,

Comments (3)

Links to this Post

  1. Getting Started with ExtJS DataGrid - Java Project | Loiane Groner | December 22, 2009
  2. extjstutorial.org | May 9, 2011
  1. My first learning about ExtJS + Java. Thank’s and I’m waiting for the next tutorial….