Create your first web application using EXTJS

First of all, you should download EXTJS from : http://www.extjs.com/products/js/download.php

Create your dynamic web project and then, copy the extjs folder in your webcontent (create a folder called JS and copy it in. You can remove the docs.

In your html or jsp, you should have this :

link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"

script type="text/javascript" src="js/ext/ext-all.js"

script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"

script type="text/javascript" src="js/ext/ext-all-debug.js"

NB : make sure of using the right path for the files, to be sur, drag the files from your packages view to the the page, behind "href=" you will see the absolute path.

Now that your project is up, lets create our first form. It will contain a two text fields for the first name and the family name, and a button. When we will clic on the button, a message box will show the full name.

Create a folder and name it "forms" in the js folder already created. This folder will contain all our forms.

Create a javascript file and name it "MyFirstForm.js".

Add a script to your html page, with the path of this :

script type="text/javascript" src="js/forms/MyFirstForm.js"

Open the file in an editor, we will begin coding our first form.

Add this code we will explain it in an other post.

Ext.onReady(function(){

//The text field for the Family Name

var familyNameTextField = new Ext.form.TextField({

fieldLabel : 'Family name',

allowBlank:false,

id : 'familyName'

});

//The text field for the First Name

var firstNameTextField = new Ext.form.TextField({

fieldLabel : 'First name',

allowBlank:false,

id : 'firstName'

});

//Button to show the MessageBox

var showMessageBoxBouton = new Ext.Button({

text:'Say Hello',

handler:showMessageBox //The function that will be called when the button is clicked

});

//The form that will contain all our components

var myForm = new Ext.form.FormPanel({

labelWidth: 115,

frame:true,

title: 'Personal informations',

bodyStyle:'padding:5px 5px 0',

width: 400,

autoScroll:true,

items: [

familyNameTextField,

firstNameTextField

],

buttons:[

showMessageBoxBouton

]

});

//Function showMessageBox that is called when the button is clicked

function showMessageBox(){

familyNameValue = Ext.getCmp('familyName').getValue(); //We will get the value by the id of the Textfield

firstNameValue = Ext.getCmp('firstName').getValue();

Ext.MessageBox.alert('Hello', familyNameValue + ' ' + firstNameValue);

}

myForm.render("form"); //The div that will contain the form in our html page

});

In the html page, add a division with with an id="form".

Launch your html page in a browser, you should see something like this :

Now, fill the text fields and click on the button, you will see this :

Hope that it was a good begining, we will see much more in the next posts (More components, validation, communication with the server, Ajax ...).

:)

Taichimaro