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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (15)

Similar a Designing an ExtJS user login panel

Similar a Designing an ExtJS user login panel (20)

Último

Último (20)

Designing an ExtJS user login panel