Ext Js form example.

Ext Js form example.

In this simplified application and easy to learn Ext Js Tutorial I will show you how to develop a form in Ext Js framework. The Ext Js form will take the input from user (in "register.html" file). The framework will validate the input and finally submit the form data to a servlet "register.java".
Then Servlet retrieves all the data and saves into database using JDBC connection. This example will help you to get standard with Ext Js framework in shortest possible time.

Ext JS provides UI elements for developing web based RIA applications. It provides many ready to use controls such as Grid, Tab Panel, Window, Tree, Layout, ComboxToolBars etc.

Steps to develop the Ext Js form example:

Step 1: Download and install the ext framework and create web application
Download latest version of Ext Js from the official site of Ext Js http://extjs.com/products/extjs/download.php. For this tutorial we have downloaded ext-2.1.zip from the site.

Procedure to create the directory structure for making the form Ext Js application. Here we have developed an application "register" on Tomcat server. Create a directory "register" in the webapps directory of tomcat server.

Then follow the following steps:

1.Create lib directory under register directory and copy these files
   a) ext-2.1/adapter/ext/ext-base.js
   b)ext-2.1/ext-all.js into lib directory.
2.Create images directory under register directory and copy these images
   a)ext-2.1/resources/images/default/button/btn-sprite.gif
   b)ext-2.1/resources/images/default/panel into images directory.
3.Create css directory under register directory and copy these style
   a)ext-2.1/resources/css/ext-all.css   into css directory.

Step 2: Create form

Now we will develop the form for our application. Create html file in the register directory and add the following code into it (register.html)

<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Register</title>
	<link rel="stylesheet" type="text/css" href="css/ext-all.css"/>
      <script type="text/javascript" src="lib/ext-base.js"></script>
	  <script type="text/javascript" src="lib/ext-all.js"></script>
	  <script type="text/javascript" src="lib/register.js"></script>
	</head>
	<body>
	   <table width="100%" align="center">
	      <tr>
		  <td width="100%" align="center" style="padding-top:100px;">
	            <div id="mydiv"></div>
	          </td>
	      </tr>
	   </table>
	</body>
</html>

Program explanation:

Now we will see how to include the Ext js framework into our application. You can easily include Ext JS framework in your application using the following code snippets:

and then add the following code also:

Which actually used to create the html form using Ext Framework.

The "register.js" is include to make form having id "mydiv".

Step 3:

To retrieve the form data and insert into the database create a new Servlet. We will use register.java as our servlet which fetches the user input and insert into database.


import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

import javax.sql.*;

import java.sql.*;



public class register extends HttpServlet{ 

 

 public void doPost(HttpServletRequest request, HttpServletResponse response)

   throws ServletException,IOException{

  response.setContentType("text/html");

  PrintWriter pw = response.getWriter();



 System.out.println("MySQL Connect Example.");

  Connection conn = null;

  String url = "jdbc:mysql://localhost:3306/";

  String dbName = "user_register";

  String driver = "com.mysql.jdbc.Driver";

  String userName = "root"; 

  String password = "root";



  String username = request.getParameter("username");

  String user_pass = request.getParameter("password");

  String firstname = request.getParameter("firstname");

  String lastname = request.getParameter("lastname");

  String email = request.getParameter("email");

  String state = request.getParameter("state");

  String city = request.getParameter("city");

  String country = request.getParameter("country");

  Statement st;

  try {

  Class.forName(driver).newInstance();

  conn = DriverManager.getConnection(url+dbName,userName,password);

  System.out.println("Connected to the database");

  String query = "insert into register set username='"+username+"',

   password='"+user_pass+"',firstname='"+firstname+"',lastname='"

  +lastname+"',email='"

  +email+"',state='"+state+"',city='"+city+"',country='"+country+"'";

 st = conn.createStatement();

 int i = st.executeUpdate(query);

  if(i>0)

  {

  pw.println("<html>");

  pw.println("<Title>");

  pw.println("Register");

  pw.println("</Title>");

  pw.println("<body>");

  pw.println("<table width='100%' align='center'>");

  pw.println("<tr>");

  pw.println("<td width='100%' align='center' style='padding-top:100px;font-

  weight:bold;color:blue;'>");

  pw.println("You are Successfully entered the Record.");

  pw.println("</td>");

  pw.println("</tr>");

  pw.println("</table>");

  pw.println("</body>");

  pw.println("</html>");



  }

  else

  {

  response.sendRedirect("register.html?error");

  }

  //  pw.println(query);

  conn.close();

  System.out.println("Disconnected from database");

  } catch (Exception e) {

  e.printStackTrace();

  }

  }

}

Save the above file into "register\WEB-INF\classes" directory.

Step 4:

Add following servlet entry into web.xml file:

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">

<display-name>Welcome to Tomcat</display-name>
<description>
Welcome to Tomcat
</description>
<servlet>
<servlet-name>register</servlet-name>
<servlet-class>register</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>register</servlet-name>
<url-pattern>/register</url-pattern>
</servlet-mapping>

</web-app>

Step 5:

Now compile the java code using javac command from command prompt.

Step 6:

Create a database called user_register and then create register� table. Here is the sql query to create register table:

create table `register` (
`id` double ,
`username` varchar (100),
`password` varchar (100),
`firstname` varchar (100),
`lastname` varchar (100),
`email` varchar (100),
`state` varchar (100),
`city` varchar (100),
`country` varchar (100)
);

Step 7:

Start tomcat and then type http://localhost:8080/register/register.html in the browser and press enter. Enter the values and press "Submit" button. You browser should display the success message. If data is inserted successfully then it display success message otherwise it can be send redirect to register.html.

Successful Output of the program:

Download the full web application discussed here.

Download the application

Ext Js form example.

Ext Js form example.

Tutorials