11.Extjs登录页面js

 /**
  * @author sux
  * @desc 登录
  */
 Ext.onReady(function(){
     Ext.QuickTips.init(); //错误信息显示必须
     var loginForm = new Ext.form.FormPanel({
         //title: '用户登录',
         width: 290,
         height: 300,
         labelWidth: 50,
         labelAlign: 'right',
         defaults: {
             width: 210,
             layout: 'form',
             xtype: 'panel'
         },
         //renderTo:属性指明属性指示EXT将表格渲染到什么地方，所以在HTML里应该有一个<div id='loginForm'></div>与之对应
         renderTo: 'loginForm',
         //ext常见布局
         //ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor
         layout: 'table',
         //设置为true时可以为panel添加背景色、圆角边框等，如下图
         frame: true, //背景
         //指定按钮的位置
         buttonAlign: 'center',
         bodyStyle: 'padding: 75px 0px 0px 50px; background-image: url(img/login.jpg)',
         method: 'post',
         //
         //选定好layout布局后，其相应的配置属性就在这个对象上进行设置
         layoutConfig:{
             columns: 2
         },
         items: [{
             items:[{
             xtype: 'textfield',
             fieldLabel: '用户名', //form布局才显示出labelName
             name: 'username',
             id: 'indexUserName',
             allowBlank: false,//allowBlank：是否允许为空，默认为true
             msgTarget: 'side',//提示框位置
             blankText: '用户名不能为空',
             regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
             regexText: '不能输入特殊字符'
             }],
             colspan: 2
         },{
             items:[{
             xtype: 'textfield',
             fieldLabel: '密&nbsp;&nbsp;&nbsp;码',
             regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/, //字母、数字、汉字、下画线
             regexText: '不能输入特殊字符',
             name: 'password',
             inputType: 'password',
             allowBlank: false,
             blankText: '用户密码不能为空',
             msgTarget: 'side'
             }],
             colspan: 2
         },{
             items:[{
             xtype: 'textfield',
             fieldLabel: '验证码',
             blankText: '验证码不能为空',
             name: 'validateCode',
             allowBlank: false,
             msgTarget: 'side',
             width: 50,
              listeners : {////添加监听事件 可以结合handler测试这两个事件哪个最先执行
                 specialkey : function(field, e) {//添加回车事件
                     if (e.getKey() == Ext.EventObject.ENTER) {
                         loginForm.getForm().getEl().dom.action="user_login.action";////再次设定action的地址
                         loginForm.getForm().getEl().dom.submit();
                     }
                 }
             }
             }],
             width: 120
         },{
             items:[{
             xtype: 'panel',
             //：使用组件的html属性嵌入html代码，如果html代码中存在参数可以使用字符串拼接的方式拼接html代码。
             html: '<img src="/hrmsys/validate" title="点击刷新" style="cursor:hand" id="validate" onclick="refreshCode()"/>'
             }]
         },{
             layout: 'table',
             layoutConfig:{
                 columns: 2
             },
             bodyStyle: 'margin-top: 10px;',
             colspan: 2,
             items: [{
                 xtype: 'button',
                 text: '确定',
                 style: 'margin-left: 30px;',
                 width: 60,
                 handler: function(){
                     loginForm.getForm().getEl().dom.action="user_login.action";
                     loginForm.getForm().getEl().dom.submit();
                 }
             },{
                 xtype: 'button',
                 width: 60,
                 style: 'margin-left: 10px;',
                 text: '取消',
                 handler: function(){//添加事件
                 loginForm.getForm().reset();
             }
             }]
         }]
     });
     Ext.getCmp("indexUserName").focus(true, true);//初始化页面后用户名获取焦点
 });

 function refreshCode(){
     Ext.getDom('validate').src="/hrmsys/validate.jsp?code="+Math.random();
 }