11.Extjs登录页面js

/**
 * @author sux
 * @desc 登录
 */
Ext.onReady(function(){
    Ext.QuickTips.init(); //错误信息显示必须
    var loginForm = new Ext.form.FormPanel({
        //title: '用户登录',
         290,
        height: 300,
        labelWidth: 50,
        labelAlign: 'right',
        defaults: {
             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',
             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();
                    }
                }
            }
            }],
             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;',
                 60,
                handler: function(){
                    loginForm.getForm().getEl().dom.action="user_login.action";
                    loginForm.getForm().getEl().dom.submit();
                }
            },{
                xtype: 'button',
                 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();
}