因项目中用到Ext Js,一无所知的我开始学习这个功能强大的js前端框架,将平时的code记录在博客里,以备日后查看,也给有需要的人,如有不当,请大家不吝赐教。
Ext.onReady(function() { Ext.QuickTips.init(); var banner = { xtype : 'box', autoEl : { html : '<div >' + ' <img src="' + './gzgx/images/logo_30x30.png" />' + ' <span>' + '欢迎您登录XX查询系统!' + '<span>' + '</div>' }, style : ' font-size:1.5em; 100%; text-align:center; padding:15px; ' };//title标题 var subEnterLister = { specialkey : function(field, e) { if (e.getKey() == e.ENTER) { submitForm(); } } };//定义键盘Enter事件 var userName = { id : 'userName', name : 'userName', xtype : 'textfield', fieldLabel : '用户名', anchor : '90%', blankText : '请输入用户名!', msgTarget : 'qtip', allowBlank : false, minLength : 5, maxLength : 20, minLengthText : '用户名最短5个字符!', maxLengthText : '用户名最长20字符!', listeners : subEnterLister };//用户名 var userPassword = { id:'userPassword', name : 'userPassword', xtype : 'textfield', fieldLabel : '密 码', anchor : '90%', allowBlank : false, blankText : '请输入密码!', msgTarget : 'qtip', inputType : 'password', minLength : 5, maxLength : 20, minLengthText : '密码最短6个字符!', maxLengthText : '密码最长20字符!', listeners: subEnterLister };//密码框 var checkCode = { xtype : 'textfield', fieldLabel : '验证码', anchor : '55%', id : 'randCode', name : 'randCode', allowBlank : false, minLength : 6, maxLength : 6, blankText : '请输入验证码!', minLengthText : '验证码有误!', maxLengthText : '验证码有误!', msgTarget : 'qtip', listeners: subEnterLister };//验证码 var accountFS = { xtype : 'fieldset', title : '请登录', width : 315, collapsible : false, items : [userName,userPassword,checkCode] };//主Fieldset var submitForm =function(){ if(loginForm.getForm().isValid()){ loginForm.getEl().mask('登录验证中', 'x-mask-loading'); loginForm.getForm().submit({ waitTitle:'正在登录', waitMsg:'正在向服务器申请登录验证,请稍后...', success:function(basicform, action){ loginForm.getEl().unmask(); if (action.result.msg=='success') { document.location='index.jsp'; } else { Ext.Msg.alert('登陆错误',action.result.msg,function(){ document.location=location; }); } }, failure: function(basicform, action) { switch (action.failureType) { case Ext.form.Action.CLIENT_INVALID: Ext.Msg.alert('Failure', '请输入正确用户信息或验证码!'); break; case Ext.form.Action.CONNECT_FAILURE: Ext.Msg.alert('连接错误', 'Ajax communication failed'); break; case Ext.form.Action.SERVER_INVALID: Ext.Msg.alert('验证错误', action.result.msg,function(){ document.location=location; }); } loginForm.getEl().unmask(); } }); }else{ Ext.Msg.alert('提示','登录信息错误,请核对!'); } }; var resetForm = function(){ loginForm.getForm().reset(); }; var loginForm = new Ext.form.FormPanel({ frame : true, border : false, bodyBorder : false, height : 243, padding : 5, labelAlign : 'right', buttonAlign : 'center', url:'userLogin', method:'post', items : [ banner, accountFS ], buttons : [ { text : '登录', handler:submitForm, scope:this }, { text : '重置', handler:resetForm, scope:this } ] }); var loginWindow = new Ext.Window({ id:'loginWindow', width : 350, height : 275, border : false, modal : true, closable:false, collapsible:true, constrain:true, //强制在ViewPort中显示 resizable : false, items : [loginForm] }).show(); var bd = Ext.getDom('randCode'); var bd2 = Ext.get(bd.parentNode); bd2.createChild({ tag : 'img', id:'randomPic', style:'border:1px solid white;height:18px; 60px;', src: 'randomCode', align : 'AbsBottom' }); bd2.createChild({ tag : 'a', id:'toNextPic', href:'javascript:void(0);', html: '换一张', align : 'AbsBottom' }); $('#toNextPic').click(function(){ $('#randomPic').attr({src:"randomCode"}); }); });
很简单的一个ExtJS 登录框,用的是3.4版本。