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:
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:
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!
