1 /** 2 * @author sux 3 * @desc 登录 4 */ 5 Ext.onReady(function(){ 6 Ext.QuickTips.init(); //错误信息显示必须 7 var loginForm = new Ext.form.FormPanel({ 8 //title: '用户登录', 9 width: 290, 10 height: 300, 11 labelWidth: 50, 12 labelAlign: 'right', 13 defaults: { 14 width: 210, 15 layout: 'form', 16 xtype: 'panel' 17 }, 18 //renderTo:属性指明属性指示EXT将表格渲染到什么地方,所以在HTML里应该有一个<div id='loginForm'></div>与之对应 19 renderTo: 'loginForm', 20 //ext常见布局 21 //ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 22 layout: 'table', 23 //设置为true时可以为panel添加背景色、圆角边框等,如下图 24 frame: true, //背景 25 //指定按钮的位置 26 buttonAlign: 'center', 27 bodyStyle: 'padding: 75px 0px 0px 50px; background-image: url(img/login.jpg)', 28 method: 'post', 29 // 30 //选定好layout布局后,其相应的配置属性就在这个对象上进行设置 31 layoutConfig:{ 32 columns: 2 33 }, 34 items: [{ 35 items:[{ 36 xtype: 'textfield', 37 fieldLabel: '用户名', //form布局才显示出labelName 38 name: 'username', 39 id: 'indexUserName', 40 allowBlank: false,//allowBlank:是否允许为空,默认为true 41 msgTarget: 'side',//提示框位置 42 blankText: '用户名不能为空', 43 regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/, 44 regexText: '不能输入特殊字符' 45 }], 46 colspan: 2 47 },{ 48 items:[{ 49 xtype: 'textfield', 50 fieldLabel: '密 码', 51 regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/, //字母、数字、汉字、下画线 52 regexText: '不能输入特殊字符', 53 name: 'password', 54 inputType: 'password', 55 allowBlank: false, 56 blankText: '用户密码不能为空', 57 msgTarget: 'side' 58 }], 59 colspan: 2 60 },{ 61 items:[{ 62 xtype: 'textfield', 63 fieldLabel: '验证码', 64 blankText: '验证码不能为空', 65 name: 'validateCode', 66 allowBlank: false, 67 msgTarget: 'side', 68 width: 50, 69 listeners : {////添加监听事件 可以结合handler测试这两个事件哪个最先执行 70 specialkey : function(field, e) {//添加回车事件 71 if (e.getKey() == Ext.EventObject.ENTER) { 72 loginForm.getForm().getEl().dom.action="user_login.action";////再次设定action的地址 73 loginForm.getForm().getEl().dom.submit(); 74 } 75 } 76 } 77 }], 78 width: 120 79 },{ 80 items:[{ 81 xtype: 'panel', 82 //:使用组件的html属性嵌入html代码,如果html代码中存在参数可以使用字符串拼接的方式拼接html代码。 83 html: '<img src="/hrmsys/validate" title="点击刷新" style="cursor:hand" id="validate" onclick="refreshCode()"/>' 84 }] 85 },{ 86 layout: 'table', 87 layoutConfig:{ 88 columns: 2 89 }, 90 bodyStyle: 'margin-top: 10px;', 91 colspan: 2, 92 items: [{ 93 xtype: 'button', 94 text: '确定', 95 style: 'margin-left: 30px;', 96 width: 60, 97 handler: function(){ 98 loginForm.getForm().getEl().dom.action="user_login.action"; 99 loginForm.getForm().getEl().dom.submit(); 100 } 101 },{ 102 xtype: 'button', 103 width: 60, 104 style: 'margin-left: 10px;', 105 text: '取消', 106 handler: function(){//添加事件 107 loginForm.getForm().reset(); 108 } 109 }] 110 }] 111 }); 112 Ext.getCmp("indexUserName").focus(true, true);//初始化页面后用户名获取焦点 113 }); 114 115 function refreshCode(){ 116 Ext.getDom('validate').src="/hrmsys/validate.jsp?code="+Math.random(); 117 }