基本代码：
<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":"登录成功!"}