Designing an ExtJS user login panel

A simplified guide By NithyaVidhyaarthi

Purpose & Pre-requisites ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Author notes… ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Our Roadmap ,[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Points to remember… ,[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Setting the basic platform… ,[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Designing text box with Ext 10 - April - 2011 Designing a User-login panel with ExtJS

How to define a textbox in ExtJS? TIPS 10 - April - 2011 Designing a User-login panel with ExtJS

Coding the first step… ,[object Object],xtype: 'textfield' , fieldLabel: 'User name' , width: 150 , id: 'txtUserName' , allowBlank:false , minLength:3 , maxLength: 30 ,[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Designing the password field ,[object Object],xtype: 'textfield‘ , fieldLabel: ‘Password' , inputType: 'password‘ , width: 150 , id: 'txtUserName' , allowBlank:false , minLength:3 , maxLength: 30 ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Creating a form. ,[object Object],[object Object],var myform = new Ext.form.FormPanel({ width:400 , height: 250 , renderTo: document.body , items:[] /* this is an empty items collection. */ }); 10 - April - 2011 Designing a User-login panel with ExtJS

Form + Textbox ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Additional Info… ,[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Additional Info ,[object Object],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

Additional Info ,[object Object],var myform = new Ext.form.FormPanel({ 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

Other Observations… ,[object Object],[object Object],[object Object],[object Object],[object Object],INFO 10 - April - 2011 Designing a User-login panel with ExtJS

Building the form further… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

First look at screen… ,[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Styling the form a bit… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],INFO 10 - April - 2011 Designing a User-login panel with ExtJS

The styled login form. ,[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

A close look… ,[object Object],[object Object],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

What about the button? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Code to button ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

And, here we go… 10 - April - 2011 Designing a User-login panel with ExtJS

Observance ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Planning the second phase… ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Validation criteria, & process. ,[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

The ExtJS default validation ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Ok fine, but where’s tooltip? ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Coding the tooltip… ,[object Object],[object Object],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

Having a look at tooltip… ,[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Other validations and text… ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Firing the validation at our will ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Firing the validation at our will ,[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Coding the form validation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Wiring form validation & button TIP 10 - April - 2011 Designing a User-login panel with ExtJS

Handlers and Listeners ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

What a listener does? ,[object Object],[object Object],[object Object],[object Object],[object Object],TIP 10 - April - 2011 Designing a User-login panel with ExtJS

Linked listeners ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Clarification INFO 10 - April - 2011 Designing a User-login panel with ExtJS

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

Beginning authentication… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Final destination… ,[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Past & Present ,[object Object],10 - April - 2011 Designing a User-login panel with ExtJS Past: “Beginning ExtJS with ASP.Net” “ Beginning ExtJS with ASP.Net” (Part two) Present: “Designing a User Login panel with ExtJS”

Author epilogue ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

With Thanks… ,[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Contact me via ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Disclaimer ,[object Object],10 - April - 2011 Designing a User-login panel with ExtJS

Designing an ExtJS user login panel

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to Designing an ExtJS user login panel

Similar to Designing an ExtJS user login panel (20)

Recently uploaded

Recently uploaded (20)

Designing an ExtJS user login panel