1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
|
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.FormPanel({
//id: 'login-form',
bodyStyle: 'padding:15px;background:transparent',
border: true,
url:'login.php',
title:'Please Login',
frame:true,
defaultType:'textfield',
monitorValid:true,
items: [{
xtype: 'box',
autoEl: { tag: 'div',
html: '<img src="/extjs/qis_logo_small.png" class="app-img" /><br><br/>'}
},
{ xtype: 'textfield', id: 'userid',
fieldLabel: 'Userid',
allowBlank: false, blankText: 'userid is required', minLength: 3,
msgTarget:'side'
},
{ xtype: 'textfield', id: 'password',
fieldLabel: 'Password',
inputType: 'password',allowBlank: false, blankText: 'Password is required', minLength: 6,
msgTarget:'side'
}],
buttons:[{
text:'Login',
formBind: true,
// Function that fires when user clicks the button
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Connecting',
waitMsg:'Validating Identity...',
// 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 = 'home.php';
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){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Login Failed!', obj.errors.reason);
}else{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
}
login.getForm().reset();
}
});
}
}]
});
//Ext.onReady(function() {
var win = new Ext.Window({
layout: 'form',
width: 340,
autoHeight: true,
closable: false,
moveable: true,
border: false,
resizable: false,
items: [login]
});
win.show();
});
|
