Getting started with ExtJS in your J2EE project

Posted on : 01-12-2009 | By : Loiane | In : ExtJS

1

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

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

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: http://github.com/loiane/extjs-helloworld

Reference: Ext Js Community

Happy Coding!

Share/Save

Comments (1)

Getting Started with ExtJS DataGrid - Java Project \| Loiane Groner said on 22-12-2009
	[...] Before we get started, you must configure your project to use Ext JS library. If you do not know how to do it, you can check it out this tutorial. [...]

Featured Posts