11.Extjs登录页面js

  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: '密&nbsp;&nbsp;&nbsp;码',
 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 }