A simplified guide

By NithyaVidhyaarthi
Purpose & Pre-requisites
This tutorial is intended to help developers who would
like to take up ExtJS as their major tool for web
application development.
This tutorial uses Ext 3.3.0 version for visual clarifications.
While most contents are still appropriate, it is strongly
suggested for the observer to pay attention to the
“changes.html” bundled with every release to cross-verify
new updates/ deprecation(s) if any.
10 - April - 2011 Designing a User-login panel with ExtJS 2
Author notes…
Hi there, we now begin with designing a user login panel
with ExtJS. Through out this lesson, I’d delivered much
like, I sit beside you in your living room and we jointly
design the login panel.
I also make an assumption that, you have the idea of
configuring ExtJs in your application. In case if you don’t,
kindly take a look at “Beginning ExtJs with ASP.NET – Part
two”, for gaining the basics with ExtJS.
10 - April - 2011 Designing a User-login panel with ExtJS 3
Our Roadmap
Create a form element.
Create three controls (2 input fields & a button).
Validations: fields should not be left blank, minimum
of three characters and a maximum of thirty
characters.
Provide intimation using tooltips when validations
are violated.
The authentication process should begin only if the
above regulations are observed.

10 - April - 2011 Designing a User-login panel with ExtJS 4

Points to remember…
Ext coding should be within the Ext.onReady()

function.
Ext coding uses "name : value" approach extensively.

A collection of these can be called as configuration

(or) config (or) config objects (or) config elements.

Config objects can be nested.

10 - April - 2011 Designing a User-login panel with ExtJS 5

Setting the basic platform…
Launch the Visual Studio 2008 IDE
and add the ExtJS core files.
Add a page named
“Loginpage.aspx”.
Within the “Scripts” folder, add a js
file named “loginpage.js”.

 Tip: Though its not mandatory to have

identical names for aspx page and js file,
following this can be a better option when the
project volume grows.

10 - April - 2011 Designing a User-login panel with ExtJS 6

 Designing text box with Ext

10 - April - 2011 Designing a User-login panel with ExtJS 7

How to define a textbox in ExtJS?

TIPS
10 - April - 2011 Designing a User-login panel with ExtJS 8
Coding the first step…
Lets have a look at code of user name field first.
xtype: 'textfield'
fieldLabel: Specifies the text that
, fieldLabel: 'User name' appears to the left of the textbox.
, width: 150
width & id are self-explanatory.
allowBlank: Instructs Ext that this
, id: 'txtUserName'
control should not be left blank.
, allowBlank:false minLength: Specifies the minimum
, minLength:3
no of chars to be filled in.
maxLength: Specifies the max no of
, maxLength: 30 chars allowed.
10 - April - 2011 Designing a User-login panel with ExtJS 9
Designing the password field
Lets have a look at code of user name field first.
xtype: 'textfield‘
inputType: Specifies the text should
, fieldLabel: ‘Password' be interpreted as password.
, inputType: 'password‘
Note: Other than this property, rest of properties
, width: 150 are the same like any textfield.
, id: 'txtUserName'

, allowBlank:false

, minLength:3

, maxLength: 30
10 - April - 2011 Designing a User-login panel with ExtJS 10
Creating a form.
Now lets create a form panel. This would be a bit
different from defining a control. Lets create a variable
named "myform" .
var myform = new Ext.form.FormPanel({
width:400
, height: 250
, renderTo: document.body
, items:[] /* this is an empty items collection. */
});

It is to the items config, we need the place the controls

10 - April - 2011 Designing a User-login panel with ExtJS 11
 Form + Textbox
var myform = new Ext.form.FormPanel({ Add the textbox to
width:400
, height: 250
the items config.
, renderTo: document.body Kindly note the
, items:[{ opening curly
xtype: 'textfield' braces enclosing
, fieldLabel: 'Password'
, width: 150 the control.
, id: 'txtPassword' Each control would
, inputType: 'password'
, allowBlank:false
be enclosed within
, minLength:3 curly brackets.
, maxLength: 30
}]
});
10 - April - 2011 Designing a User-login panel with ExtJS 12
Additional Info…
Brackets define the boundary between controls, or
they isolate the items from neighboring controls.
Note the “renderTo” property. It instructs Ext as
where the display the form.
In our example, we had rendered it to the document
body. We can render the form to any “div” element,
by specifying the “id” of div.
Example: <div id=“divFormContainer”></div>
 In Ext – renderTo: ‘divFormContainer’

10 - April - 2011 Designing a User-login panel with ExtJS 13

Additional Info
Only one items collection can exists at a single root
level.
var myform = new Ext.form.FormPanel({
width:400
, height: 250
, renderTo: document.body
, items:[]/* this is an empty items collection. */
, items:[] /* this cannot exist */
});
10 - April - 2011 Designing a User-login panel with ExtJS 14
Additional Info
However, items collection can exists at different
var myform = new Ext.form.FormPanel({
levels.
width:400
, items:[{
items:[{ /* this nesting is permitted */
}]
, items:[{ /* this is not permitted, because */
}] /* it is nesting at same level */
}]
});

10 - April - 2011 Designing a User-login panel with ExtJS 15

Other Observations…
Camel-Casing is followed most extensively through
out Ext.
e.g. : minLength:
firstLetter in lowercase, and the first letter of second
word in Caps.

 This is a part of coding standards followed almost

INFO universally. It is not that one over-weighs the other, but
following a uniform method, makes the going smooth in
long run.
 Camel Casing, Pascal casing are to name a few.

10 - April - 2011 Designing a User-login panel with ExtJS 16

Building the form further…
Now lets add the password field:
var myform = new Ext.form.FormPanel({
width:400 , height: 250
, renderTo: document.body
, items:[{
xtype: 'textfield', fieldLabel: 'User name’, width: 150,
id: 'txtUserName', allowBlank:false, minLength:3, maxLength: 30
} , { /* Mind the curly braces, the second control is appended with first
*/
xtype: 'textfield', fieldLabel: 'Password’, id: 'txtPassword',
inputType: 'password’, allowBlank:false, minLength:3, maxLength: 30
, width: 150
}]
});
Now lets run the form
10 - April - 2011 Designing a User-login panel with ExtJS 17
First look at screen…

Pretty simple, huh! Lets style it a bit…

10 - April - 2011 Designing a User-login panel with ExtJS 18

Styling the form a bit…
Lets add a title and give it a good background, add
the properties title & frame
var myform = new Ext.form.FormPanel({
/* rest of config remains the same */
, renderTo: document.body
, title: 'User Login : XYZ Solutions Login Portal‘
, frame:true
}); //Now run the form again…
document.body can also be replaced
by Ext.getBody()
INFO
10 - April - 2011 Designing a User-login panel with ExtJS 19
The styled login form.

Hmm… better than before… 

10 - April - 2011 Designing a User-login panel with ExtJS 20

A close look…
Title appears here.
frame : true causes the blue
background and the
curved edges.

Try it yourself: Try changing the frame value (between

true & false), refresh the screen & observe the changes
yourself.

10 - April - 2011 Designing a User-login panel with ExtJS 21

What about the button?
Yes of-course. For placing the button we have two
choice.
Option 1: To add the button along with existing
controls.
 The button would appear below the last control.
Option 2: To add at the bottom of FormPanel.
 The button would appear just above the end of form.
Lets prefer Option 2.

10 - April - 2011 Designing a User-login panel with ExtJS 22

Code to button
var myform = new Ext.form.FormPanel({
width:400
, frame:true
/* rest of code remains the same */
, buttonAlign: 'center' /* default is 'right', another
option is 'left' */
, buttons: [{text:'Login'},{text:'Reset'}]
});

Add the yellow highlighted code at the bottom and

refresh the screen.
10 - April - 2011 Designing a User-login panel with ExtJS 23
And, here we go…

10 - April - 2011 Designing a User-login panel with ExtJS 24

Observance
A close observation would reveal you that, the

controls specified in the items collection appear one

below the other.
But, the buttons appear left to right. This is the

nature of “group controls”. Lets return to this a bit

later.

10 - April - 2011 Designing a User-login panel with ExtJS 25

Planning the second phase…
Well, now that we had designed the form, and the

form is complete in its visual appearance.

Next is user-interaction, i.e., performing the form

validation and proceeding with mock user

authentication once the form is valid.

10 - April - 2011 Designing a User-login panel with ExtJS 26

Validation criteria, & process.
We, already had defined the validation criteria to the

input fields, (allowBlank, minLength, maxLength).

Now they need to checked.

Ext, by default, checks the control’s validity during the blur

(lost focus) event.

Try it yourself: Refresh the form, click upon the user

name field, and click anywhere outside the form. You

would see, as in the next screen.
10 - April - 2011 Designing a User-login panel with ExtJS 27
The ExtJS default validation
Ext indicates, the
control with invalid
state, with the rose-
background and with
red squiggly line.
 Note: The rose background might
be visible/hidden depending upon
browser & browser versions, Ext
versions, Ext Themes used.

10 - April - 2011 Designing a User-login panel with ExtJS 28

Ok fine, but where’s tooltip?
Well, now that the end-user can identify that the

form contains some invalid data or at least in an

invalid state.
But the user has no idea about what caused the form

to be invalid and he/she can be totally clue less about

what is happening.

10 - April - 2011 Designing a User-login panel with ExtJS 29

Coding the tooltip…
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

The first line enables displaying the tooltips, the

second line instructs that the error message to be
displayed at the right of the “invalid-stated” control.

Add these lines of code above the Ext.onReady() line.

Now again, lets run the form, and manually cause the
blur event for the username field.
10 - April - 2011 Designing a User-login panel with ExtJS 30
Having a look at tooltip…
What we see here, is
the default text shown
when the “allowBlank”
property is violated.
To customize the
default text, use the
property “blankText”.

 Yeah, but we can’t really see the cursor here…

Try it yourself: Add this code to the textbox, and check the output.
blankText: ‘User name field is mandatory’ (or) your custom text here..
10 - April - 2011 Designing a User-login panel with ExtJS 31
Other validations and text…
Likewise try for the “maxLength” and “minLength”.

To customize the message, use the “maxLengthText”

and “minLengthText” respectively.
These validations are applicable for all textfields.

Combo, time fields have their own validations &

validation texts, apart from common validations like
“allowBlank”, minLength etc.
10 - April - 2011 Designing a User-login panel with ExtJS 32
Firing the validation at our will
So far, we had tested the validation during the blur

event, and the validation occurs only for a single

control at a time.
Now we need the fire the validation process for the

entire form (which then includes all controls within

the form) at our will (that’s to say, at the click of
button).
10 - April - 2011 Designing a User-login panel with ExtJS 33
Firing the validation at our will
In our form, we had already set up all validation criteria to
both input fields.
Ext has a method named “isValid()”. This method is
available to individual controls and also for the form.
Now checking the validity for the form, will internally
check all validations within the contained elements and
then return “true” or “false” value based on the validity of
the controls.
10 - April - 2011 Designing a User-login panel with ExtJS 34
Coding the form validation
Remember the variable “myform” we declared earlier?
We gotta fire the isValid() for this form variable.
Add this function within the Ext.onReady block, not external to it.

function CheckValid()
{
if ( myform.getForm(). isValid() == true){
/* form is valid. We can proceed with authencation */
}
else{
/* form contains invalid values . Now error message placeholders would be
shown immediately right to the invalid controls. When hovered, would show
the tooltips.*/
}
}
10 - April - 2011 Designing a User-login panel with ExtJS 35
Wiring form validation & button

TIP
10 - April - 2011 Designing a User-login panel with ExtJS 36
Handlers and Listeners
There are occasion where we need to fire methods on
events. In Ext, we need to use the config “listeners” to
listen to events and fire appropriately.
Syntax: listeners:{eventName: YourMethodName}
 Example: listeners:{click: CheckValid}
handler wires the default event with the control.
 For example., the default event for button is click event.
 In such cases, listeners:{click: CheckValid} = handler: CheckValid.
i.e., they are identical and mean one and the same.
 For more info upon the events available for controls, kindly refer the
ExtJS documentation.

10 - April - 2011 Designing a User-login panel with ExtJS 37

What a listener does?
Ext listeners keeps vigil upon the specified event for the
associated control (e.g., keypress for textfield), it
immediately fires the associated method, with default
parameters.
Do not specify the brackets for the method names.
E.g., handler : CheckValid
TIP  Alternatively we can also specify inline function.
 E.g., handler: function(){ /* lines of code here*/}
10 - April - 2011 Designing a User-login panel with ExtJS 38
Linked listeners
For some controls & cases, there are pre-listeners,
post listeners.
The sequence goes like so

Before event – Event – After event

Example:
beforerender – render – afterrender
You can prevent/disable the successive events by
returning false from the previous event.
e.g., by returning “false” in beforerender, we can
prevent the render event from firing, and same goes
with render - afterrender.
10 - April - 2011 Designing a User-login panel with ExtJS 39
Clarification

INFO
10 - April - 2011 Designing a User-login panel with ExtJS 40
Reading the values…

TIPS

10 - April - 2011 Designing a User-login panel with ExtJS 41

Beginning authentication…
Now that we had seen how we can read value from Ext
controls, lets code the authentication part. Lets continue
with the previous method “CheckValid()” , within the true
block.
var userName = Ext.getCmp(‘txtUserName’).getValue();
var pswd = Ext.getCmp(‘txtPassword’).getValue();
if(userName == ‘ExtJS’ && pswd == ‘excellent’){
Ext.MessageBox.show({title: ‘Hurray’, msg: ‘You had scaled the first step in
Ext’, icon:Ext.MessageBox.INFO});
}
else{
Ext.MessageBox.show({title: ‘Gosh!!!’, msg: ‘You need help’,
icon:Ext.MessageBox.WARNING});
}
10 - April - 2011 Designing a User-login panel with ExtJS 42
Final destination…
So well so far, all that is to be done is to launch the

application in browser.
Once the Ext message box is displayed (that within the

true block of course), we can be sure that we had achieved

our estimated target.
For now, I leave it to you to see the output by yourself.

10 - April - 2011 Designing a User-login panel with ExtJS 43

Past & Present
Past: “Beginning ExtJS with ASP.Net”
“Beginning ExtJS with ASP.Net” (Part two)
Present: “Designing a User Login panel with ExtJS”
I had concentrated much upon the designing and had
thrown light upon comparatively less “other related
info”. The reason being, this is vast enough to deviate
from original track and I might end up discussing too lot
and this tutorial would end up as a beginners
nightmare. There by I myself had cut short certain
discussions.
10 - April - 2011 Designing a User-login panel with ExtJS 44
Author epilogue
However, this journey is similar with the origination

of a river. Small, humble at the origination, However

with time, would gain mass, depth & volume
discussing more & more substance, talk, sharing, with
& only with readers response
Response in any form would be highly appreciated

and welcomed.
10 - April - 2011 Designing a User-login panel with ExtJS 45
Next in future

Beginning ExtJS with Database

using ASP.Net

10 - April - 2011 Designing a User-login panel with ExtJS 46

With Thanks…
Hi, I’m happy to have you attention till now and am all the
more happy if you let me know me how far this tutorial
had helped you grasp the designing basics of ExtJS, and
just let me know how the information can be conveyed in
an improved, easy-to-read & understand format, how can I
adjust my way of conveying information so that no vital
information is missed.
Thank you once again.

10 - April - 2011 Designing a User-login panel with ExtJS 47

Contact me via
Mail:
arunprasadnva@gmail.com
arun85prasad@gmail.com
Social network(s) / Services:
arunprasadvidhyaarthi – skype, slideshare.com
Arun85prasad – twitter, gmail, live, yahoo.com
Arun Prasad - facebook, orkut
Arunprasad – scribd.com
Mobile:
+91 978 979 6615
10 - April - 2011 Designing a User-login panel with ExtJS 48
Disclaimer
The names of Technologies, Product(s), Companies,
Application(s), Tool(s), Utilities, etc provided with this
material are intended to reference only. The name(s),
brand name(s), trademark(s), registered trademark(s),
logo(s), slogan(s) belong to their respective owners in
the respective countries.

10 - April - 2011 Designing a User-login panel with ExtJS 49