SlideShare a Scribd company logo
1 of 48
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

More Related Content

Viewers also liked

Nko workshop - node js crud & deploy
Nko workshop - node js crud & deployNko workshop - node js crud & deploy
Nko workshop - node js crud & deploy
Simon Su
 
Life as an asp.net programmer
Life as an asp.net programmerLife as an asp.net programmer
Life as an asp.net programmer
Arun Prasad
 
Basics of Ext JS
Basics of Ext JSBasics of Ext JS
Basics of Ext JS
ikhwanhayat
 

Viewers also liked (14)

Theming Ext JS 4
Theming Ext JS 4Theming Ext JS 4
Theming Ext JS 4
 
Introduction to ExtJS
Introduction to ExtJSIntroduction to ExtJS
Introduction to ExtJS
 
Nko workshop - node js crud & deploy
Nko workshop - node js crud & deployNko workshop - node js crud & deploy
Nko workshop - node js crud & deploy
 
Ext Js Events
Ext Js EventsExt Js Events
Ext Js Events
 
Life as an asp.net programmer
Life as an asp.net programmerLife as an asp.net programmer
Life as an asp.net programmer
 
Ext js 6
Ext js 6Ext js 6
Ext js 6
 
Matteo Murgida - Monet: a NodeJS enterprise system for IoT and Energy Managem...
Matteo Murgida - Monet: a NodeJS enterprise system for IoT and Energy Managem...Matteo Murgida - Monet: a NodeJS enterprise system for IoT and Energy Managem...
Matteo Murgida - Monet: a NodeJS enterprise system for IoT and Energy Managem...
 
Panal data and the eviews
Panal data and the eviewsPanal data and the eviews
Panal data and the eviews
 
Basics of Ext JS
Basics of Ext JSBasics of Ext JS
Basics of Ext JS
 
Extjs
ExtjsExtjs
Extjs
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
 
Intro to Ext JS 4
Intro to Ext JS 4Intro to Ext JS 4
Intro to Ext JS 4
 
Introduction to .net framework
Introduction to .net frameworkIntroduction to .net framework
Introduction to .net framework
 

Similar to Designing an ExtJS user login panel

Sencha touch application v2.00
Sencha touch application v2.00Sencha touch application v2.00
Sencha touch application v2.00
Trịnh Thành
 
Lab #9 and 10 Web Server ProgrammingCreate a New Folder I s.docx
Lab #9 and 10 Web Server ProgrammingCreate a New Folder  I s.docxLab #9 and 10 Web Server ProgrammingCreate a New Folder  I s.docx
Lab #9 and 10 Web Server ProgrammingCreate a New Folder I s.docx
DIPESH30
 

Similar to Designing an ExtJS user login panel (20)

Sencha touch
Sencha touchSencha touch
Sencha touch
 
Essential html tweaks for accessible themes
Essential html tweaks for accessible themesEssential html tweaks for accessible themes
Essential html tweaks for accessible themes
 
Creating a New iSites Tool
Creating a New iSites ToolCreating a New iSites Tool
Creating a New iSites Tool
 
IT- 328 Web Administration (Practicals)
IT- 328 Web Administration (Practicals)IT- 328 Web Administration (Practicals)
IT- 328 Web Administration (Practicals)
 
Controls Use in Windows Presentation Foundation (WPF)
Controls Use in Windows Presentation Foundation (WPF)Controls Use in Windows Presentation Foundation (WPF)
Controls Use in Windows Presentation Foundation (WPF)
 
srt311 Project2
srt311 Project2srt311 Project2
srt311 Project2
 
Ext Js
Ext JsExt Js
Ext Js
 
Sencha touch application v2.00
Sencha touch application v2.00Sencha touch application v2.00
Sencha touch application v2.00
 
PPT1
PPT1PPT1
PPT1
 
Enhancements
Enhancements Enhancements
Enhancements
 
Vsto 3 Snug
Vsto 3 SnugVsto 3 Snug
Vsto 3 Snug
 
Vsto 3 Excel Add-in SNUG
Vsto 3 Excel Add-in SNUGVsto 3 Excel Add-in SNUG
Vsto 3 Excel Add-in SNUG
 
Introduction Dojo Toolkit & IBM Lotus Domino
Introduction Dojo Toolkit & IBM Lotus DominoIntroduction Dojo Toolkit & IBM Lotus Domino
Introduction Dojo Toolkit & IBM Lotus Domino
 
Cross Platform Mobile App Development - An Introduction to Sencha Touch
Cross Platform Mobile App Development - An Introduction to Sencha TouchCross Platform Mobile App Development - An Introduction to Sencha Touch
Cross Platform Mobile App Development - An Introduction to Sencha Touch
 
Asp notes
Asp notesAsp notes
Asp notes
 
Lab #9 and 10 Web Server ProgrammingCreate a New Folder I s.docx
Lab #9 and 10 Web Server ProgrammingCreate a New Folder  I s.docxLab #9 and 10 Web Server ProgrammingCreate a New Folder  I s.docx
Lab #9 and 10 Web Server ProgrammingCreate a New Folder I s.docx
 
Building and styling forms
Building and styling formsBuilding and styling forms
Building and styling forms
 
Android interface elements and controls-chapter8
Android interface elements and controls-chapter8Android interface elements and controls-chapter8
Android interface elements and controls-chapter8
 
Vb.net ide
Vb.net ideVb.net ide
Vb.net ide
 
forms
formsforms
forms
 

Recently uploaded

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4j
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 

Designing an ExtJS user login panel

  • 1. A simplified guide By NithyaVidhyaarthi
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7. Designing text box with Ext 10 - April - 2011 Designing a User-login panel with ExtJS
  • 8. How to define a textbox in ExtJS? TIPS 10 - April - 2011 Designing a User-login panel with ExtJS
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. And, here we go… 10 - April - 2011 Designing a User-login panel with ExtJS
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36. Wiring form validation & button TIP 10 - April - 2011 Designing a User-login panel with ExtJS
  • 37.
  • 38.
  • 39.
  • 40. Clarification INFO 10 - April - 2011 Designing a User-login panel with ExtJS
  • 41. Reading the values… TIPS 10 - April - 2011 Designing a User-login panel with ExtJS
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.