Ext登陆窗口代码,关键代码位于 login.js 中
html代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>样例</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<link rel="stylesheet" type="text/css"
href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<SCRIPT type="text/javascript" src="../js/login.js"></SCRIPT>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/xtheme-slate.css" />
<SCRIPT type="text/javascript" src="../ext/ext-lang-zh_CN.js"></SCRIPT>
<script type="text/javascript">
Ext.onReady(function()
{
Ext.MessageBox.alert('haha','o(∩_∩)o...哈哈');
})
</script>
</head>
<body>
</body>
</html>
login.js 代码:
Ext.onReady(function(){
//开启表单提示
Ext.QuickTips.init();
//设置提示信息位置为边上
Ext.form.Field.prototype.msgTarget = 'side';
var win = new Ext.Window({
id:'login-win',
title:'登陆',
iconCls:'tabs',
width:300,
height:120,
collapsible: true,
plain: true,
//初始化表单面板
items:new Ext.form.FormPanel({
id:'login-form',
labelWidth:50, // 默认标签宽度板
labelAlign:'right',
buttonAlign:'center',
//不设置该值,表单将保持原样,设置后表单与窗体完全融合
baseCls:'header',
layout:'form',
defaults:{
width:200
},
//默认字段类型
defaultType:'textfield',
items:[{
id:'username',
fieldLabel:'账号',
allowBlank:false//禁止为空
},{
id:'password',
inputType:'password',
fieldLabel:'密码',
allowBlank:false
}],
//初始化按钮
buttons:[{
text:'登陆',
type:'submit',
handler:function(){
var but=this;
but.setDisabled(true);
this.setText('正在登陆');
//将表单提交
Ext.getCmp('login-form').getForm().submit({
url:'/XXX/login.action',
method:"POST",
success:function(form,action){
document.location='/XXX/main.jsp';
},
failure:function(){
but.setText("登陆");
but.setDisabled(false);
}
});
}
}]
})
});
//将窗口显示出来
win.show();
});