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(); });