基本代码:
<script>
Ext.onReady(function(){ Ext.create('Ext.form.Panel', { title: '登录', bodyPadding: 5, 350, // 将会通过 AJAX 请求提交到此URL url: '${pageContext.request.contextPath}/back/login.do', // 表单域 Fields 将被竖直排列, 占满整个宽度 frame: true, layout:'auto', // The fields defaultType: 'textfield', items: [{ fieldLabel: '用户名', name: 'name', allowBlank: false, blankText:'用户名不能为空' },{ fieldLabel: '密码', inputType:'password', name: 'pwd', allowBlank: false, blankText:'密码不能为空' },{ fieldLabel: '用户类型', name:'type', allowBlank: false, hidden:true, //隐藏组件 默认false value:1//表单默认值 } ], // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', formBind: true, //only enabled once the form is valid disabled: true, handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ success: function(form, action) { Ext.Msg.alert('提示信息', action.result.restMsg); }, failure: function(form, action) { Ext.Msg.alert('提示信息', action.result.restMsg); } }); } } }], renderTo: Ext.getBody() }); }); </script>
没有添加字段校验,验证码,密码加密等,只是纯粹的登录功能的实现,具体细节暂时忽略!
login.do 对应的程序:
/** * 登录 * * @return */ @RequestMapping("/login") @ResponseBody public void login(@RequestParam String name,@RequestParam String pwd,@RequestParam int type,Writer writer) { String valMsg =""; try { User user = new User(); user.setUname(name); user.setPwd(pwd); user.setUtype(type); User getUser = userService.queryUser(user); if(getUser!=null){ valMsg=showResultMsg(true, "登录成功"); //跳转到首页 }else { valMsg=showResultMsg(false, "用户不存在!"); } } catch (Exception e) { e.printStackTrace(); valMsg=showResultMsg(true, "登录失败"); }finally { try { writer.write(valMsg); } catch (IOException e) { e.printStackTrace(); } } }
返回的结果:
{"result":true,"restMsg":"登录成功!"}