PDA

View Full Version : create login page using extjs4.1 according to client requirements



please
1 Aug 2012, 9:03 PM
Hi all,
could u please any body tell me how to create login page using extjs4.1.i am new to extjs. i have idea on html and javascript and jquery.i tried sample login page using extjs4.1 so i got succeeded in this, my question is how to create for my login page that is according to client requirement.in extjs flowpanel i used for login page its comming in rich format i want to achieve client requirement of login for that html i need to write or extjs4.1 means the architecture of flow

my code is i written for login
<html>
<head>
<script type="text/javascript" src="ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();

// Create a variable to hold our EXT Form Panel.
// Assign various config options as seen.
var login = new Ext.FormPanel({
labelWidth:80,
url:'login.jsp',
frame:true,
title:'Please Login',
defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Username',
name:'loginUsername',
fieldStyle: 'background-color: #ddd; background-image: none;',
allowBlank:false
},{
fieldLabel:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
}],

// All the magic happens after the user clicks the button
buttons:[{
text:'Login',
formBind: true,
// Function that fires when user clicks the button
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Sending data...',

// Functions that fire (success or failure) when the server responds.
// The one that executes is determined by the
// response that comes from login.asp as seen below. The server would
// actually respond with valid JSON,
// something like: response.write "{ success: true}" or
// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
// depending on the logic contained within your server script.
// If a success occurs, the user is notified with an alert messagebox,
// and when they click "OK", they are redirected to whatever page
// you define as redirect.

success:function(){
Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
if (btn == 'ok'){
var redirect = 'success.html';
window.location = redirect;
}
});
},

// Failure function, see comment above re: success and failure.
// You can see here, if login fails, it throws a messagebox
// at the user telling him / her as much.

failure:function(form, action){
Ext.Msg.alert('Status', 'Login failed!');
}
});
}
}]
});


// This just creates a window to wrap the login form.
// The login object is passed to the items collection.
var win = new Ext.Window({
layout:'fit',
width:300,
height:150,
closable: false,
resizable: false,
plain: true,
border: false,
items: [login]
});
win.show();
});

</script>
</head>
<body>



</body>
</html>

and login.jsp is
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String result;
String loginUsername = request.getParameter("loginUsername");
String loginPassword = request.getParameter("loginPassword");
if ((null != loginUsername && loginUsername.length() > 0)&&(null != loginPassword && loginPassword.length() > 0)) {
if (loginUsername.equals("admin")&&(loginPassword.equals("admin")))
result = "{success:true}";
else
result = "{success:false,errors:{reason:'Login failed.Try again'}}";

} else {
result = "{success:false,errors:{reason:'Login failed.Try again'}}";
}
%>
<%=result %>

and success.html is
<html>
<head>
</head>
<body>
<h1>success<h1>
</body>
</html>

scottmartin
2 Aug 2012, 8:24 AM
Have a look at:
http://www.sencha.com/forum/showthread.php?154499

Scott.