今天照着例子用firebug调试了一个ext的登录(firebug调试需Ext包的支持)
1.js
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.asp',
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',
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 = 'test.asp';
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();
}
});
}
}]
});
// 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();
});
2.处理页面testlogin.php(当然可以是action,servlet,jsp页面)
<?php
$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";
if($loginUsername == "f"){
echo "{success: true}";
} else {
echo "{success: false, errors: { reason: 'Login failed. Try again.' }}";
}
?>
3.效果如图
- 大小: 130.6 KB
分享到:
相关推荐
Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能...
Firebug 调试JavaScript和CSS教程
Firebug调试工具,内附有使用注意事项等相关文档,希望对大家有所帮助
叫你如何使用firebug调试javascript和jquery,以及如何使用控制台等很多有用技巧
现在很流行的一个调试程序的插件firebug的使用方法
利用火狐的插件Firebug调试js和css 版本:firefox3.6.6/firebug1.5.2
最新火狐浏览器,加上调试工具firebug,再加上httpwatchPro,绝对超值下载!
Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能...
Firebug调试工具 可以在火狐浏览器中调试代码网页
使用FireFox firebug 调试网页的方法.doc
firebug1.45调试javascript工具,带调试功能,可设断点,目前最新稳定版。
Firebug 是网页浏览器 Mozilla Firefox 下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手...
教你如果调试各浏览器的firebug 火狐调试调试调试
介绍了firebug的使用方法 是开发测试人员必备利器 希望大家从学习中能有收获
jqgrid非常简单的例子,读取本地简单的XML,还有IE下的firebug调试工具,零分分享,只求资源共享更好交流发展
怎么使用火狐的 firebug 进行java 调试 【网络收集】
用于flex程序调试用的firefox的firebug插件。。。
安装就不用说了,很简单,在FireFox上插件库里找到FireBug就Ok了。下图是FireBug Debug 窗口。 FireBug美工用的非常普遍,公司美工妹妹用的非常熟练 呵呵,而对于我们开发人员,主要用它来Debug JS。看看官方对...
开发人员必备权威调试工具 Firebug 也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM、与 JavaScript 代码 打开火狐 -- 工具 -- 附加组建 -- 获取附加组建 -- 搜索firebug -- 安装...