基本代码:
<script>
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
title: '登录',
bodyPadding: 5,
width: 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":"登录成功!"}