// Create a variable to hold our EXT Form Panel.
// Assign various config options as seen.
var login = new Ext.FormPanel({
labelWidth:80,
url:'./includes/login.php',
hideborders:true,
frame:true,
title:'Staff 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',
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 = './';
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('Status', obj.errors.reason);
}else{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
}
login.getForm().reset();
}
});
}
},{
text:'Shut Down',
formBind: false,
handler:function(){
Ext.Msg.alert('» Google', 'You are being forwarded to www.google.com.', function(btn, text){
if (btn == 'ok'){
var redirect = 'http://www.google.com';
window.location = redirect;
}
});
}
}]
});
// 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,
bodyborder: false,
hideborders: true,
border: false,
items: [login]
});
win.show();
});
</script>";
break;
}
?>
So how would I call the script for viewport and then for login? What is happening, when I call my javascript via (js.php?script=login) it doesn't show up.
This is what I have now, but I am still not getting any javascript that is working, and it works when I am using a .js file... I am missing something and it is erking me that I can't find it.
// Create a variable to hold our EXT Form Panel.
// Assign various config options as seen.
var login = new Ext.FormPanel({
labelWidth:80,
url:'./includes/login.php',
hideborders:true,
frame:true,
title:'Staff 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',
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 = './';
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('Status', obj.errors.reason);
}else{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
}
login.getForm().reset();
}
});
}
},{
text:'Shut Down',
formBind: false,
handler:function(){
Ext.Msg.alert('» Google', 'You are being forwarded to www.google.com.', function(btn, text){
if (btn == 'ok'){
var redirect = 'http://www.google.com';
window.location = redirect;
}
});
}
}]
});
// 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,
bodyborder: false,
hideborders: true,
border: false,
items: [login]
});
win.show();
});
</script>";
break;
}
?>
Can you post how you use the code? Meaning, how you embed or try to open it? I don't see any obvious mistakes that would prevent this to output anything.
I wasn't suggesting you to use AJAX, I was just asking, because if you were using AJAX I'd know what'd be wrong.
Anyway, I think I'll be able to help here too. External JS files are not supposed to go between <script> tags. So try and remove there. Also, some browsers won't parse that file if you don't send the correct content-type header. It's a security thing.
Remove the <script> tags and add this line to the very top of your page:
Linear Mode
