没使用mvc之前的extjs4.2登录及extjs4.2的crud代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/mbs1/js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/mbs1/js/ext/bootstrap.js"></script>
<script type="text/javascript" src="/mbs1/js/ext/locale/ext-lang-zh_CN.js"></script>
<!--定义全局JS变量-->
<script type="text/javascript">var GLOBAL_ROOT_PATH="/mbs1";</script>
<style type="text/css">
html,body{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var win;
Ext.define('com.xxx.model.user', {
extend: 'Ext.data.Model',
alias : 'model.user',
idProperty:'userId',
fields: [
{name: 'userId', type: 'int'},
{name: 'loginName', type: 'string'},
{name: 'realName', type: 'string'},
{name: 'email', type: 'string'},
{name: 'phone', type: 'string'},
{name: 'status', type: 'int'}
]
});
Ext.define('com.xxx.store.user', {
alias:'store.user',
extend: 'Ext.data.Store',
model: 'com.xxx.model.user',
proxy: {
type: "ajax",
url: GLOBAL_ROOT_PATH+"/user/listbypage",
actionMethods : {
create : "POST",
read : "POST",
update : "POST",
destroy : "POST"
},
api: {
read: GLOBAL_ROOT_PATH+"/user/listbypage",
create: 'bookCreate.php',
update: GLOBAL_ROOT_PATH+"/user/edit",
destroy: 'bookDestroy.php'
},
reader: {
type: "json",
root: 'listData',
totalProperty: 'totalRecordCount'
}
},
pageSize: 3,
sorters: [{
property: 'user_id',
direction: 'ASC'
}],
autoLoad: false
});
store_object=new com.xxx.store.user();
store_object.loadPage(1);
var mypagingtoolbar=Ext.create('Ext.toolbar.Paging',{
store: store_object,
dock: 'bottom',
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg: "没有数据",
afterPageText: "页 共{0}页",
beforePageText: "第",
displayInfo: true
});
Ext.create('Ext.grid.Panel', {
title: '用户信息浏览',
tbar : [ {
xtype : 'button',
text : '新增',
handler : function(){
var add_form=Ext.create('com.xxx.view.user.addform');
win = new Ext.Window({
layout:'border',
title:'新增数据',
modal:true,
width:400,
height:200,
closeAction:'destroy',
plain: true,
items:[add_form]
});
win.down('form').getForm().reset();
win.show(this);
}
}],
store: store_object,
columnLines : true,
forceFit : true,
columns: [
{text: '用户id', dataIndex:'userId'},
{text: '登录名称', dataIndex:'loginName'},
{text: '真实姓名', dataIndex:'realName'},
{
xtype:'actioncolumn',
width:60,
items: [{
icon: GLOBAL_ROOT_PATH+'/css/img/edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var edit_form=Ext.create('com.shinowit.view.user.editform');
win = new Ext.Window({
title:'数据编辑',
layout:'border',
width:400,
height:200,
closeAction:'destroy',
modal:true,
plain: true,
items:[edit_form]
});
win.down('form').loadRecord(rec);
win.show(this);
}
},{
icon:GLOBAL_ROOT_PATH+ '/css/img/delete.gif',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.MessageBox.confirm("提示","您确定要删除这些信息吗?",function(button,text){
if (button=='yes'){
Ext.Ajax.request({
url: GLOBAL_ROOT_PATH+'/user/del',
params: {
id: rec.get('userId')
},
success: function(response){
var text = response.responseText;
var jsonObj=eval("("+text+")");
if (true==jsonObj.success){
Ext.Msg.alert('成功', jsonObj.msg);
Ext.getStore(store_object).reload();
}else{
Ext.Msg.alert('失败', jsonObj.msg);
}
}
});
}
});
}
}]
}
],
width: '100%',
height:'100%',
dockedItems: [
mypagingtoolbar
],
renderTo: Ext.getBody()
});
Ext.define('com.xxx.view.user.editform', {
extend:'Ext.form.FormPanel',
bodyStyle:'padding-top:20px;padding-left:20px;',
defaultType:'textfield',
labelAlign:'right',
width:'auto',
height : 150,
frame : true,
buttonAlign:'center',
defaults : {
allowBlank : false,
autowidth : true,
labelAlign:'right',
width : 399
},
items:[
{xtype: 'hiddenfield',name: 'userId', value: ''},
{fieldLabel:'登录名称',name:'loginName',height:20,blankText:'请输入登录名称'},
{fieldLabel:'真实姓名',name:'realName', height:20,blankText:'请输入真实姓名'}
],
buttons:[
{xtype:'button',text:'重输',handler:function(){this.up("form").getForm().reset();}},
{xtype:'button',text:'保存',handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url:GLOBAL_ROOT_PATH+'/user/edit',
waitTitle : '提示',//标题
waitMsg : '正在提交数据请稍候...',//提示信息
success: function(form, action) {
if (true==action.result.success){
Ext.Msg.alert('成功', action.result.msg);
//var start=mypagingtoolbar.cursor; //得到当前记录指针
//var limit=mypagingtoolbar.pageSize; //得到每页要显示的记录数
//Ext.getStore(store_object).load({params:{start:start,limit:limit}});
Ext.getStore(store_object).reload();
win.close(); //关闭编辑框
}else{
Ext.Msg.alert('错误', action.result.msg);
}
},
failure: function(form, action) {
Ext.Msg.alert('错误', action.result.msg);
}
});
//record =form.getRecord(), //获取表单数据元素
//values = form.getValues(); //获取该表单值
//record.set(values); //修改当前的值
//Ext.getStore(store_object).sync();
//record.commit();
//win.close(); //关闭编辑框
}
}}
]
});
Ext.define('com.xxx.view.user.addform',{
extend:'Ext.form.FormPanel',
bodyStyle:'padding-top:5px;padding-left:5px;',
defaultType:'textfield',
labelAlign:'right',
width:'auto',
height : 150,
width:390,
frame : true,
buttonAlign:'center',
defaults : {
allowBlank : false,
autowidth : true,
labelAlign:'right',
width : 299
},
items:[
{xtype: 'hiddenfield',name: 'userId', value: ''},
{fieldLabel:'登录名称',name:'loginName',height:20,blankText:'请输入登录名称'},
{fieldLabel:'真实姓名',name:'realName', height:20,blankText:'请输入真实姓名'}
],
buttons:[
{xtype:'button',text:'重输',handler:function(){this.up("form").getForm().reset();}},
{xtype:'button',text:'保存',handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url:GLOBAL_ROOT_PATH+'/user/add',
waitTitle : '提示',//标题
waitMsg : '正在提交数据请稍候...',//提示信息
success: function(form, action) {
if (true==action.result.success){
Ext.Msg.alert('成功', action.result.msg);
Ext.getStore(store_object).reload();
win.close(); //关闭编辑框
}else{
Ext.Msg.alert('错误', action.result.msg);
}
},
failure: function(form, action) {
Ext.Msg.alert('错误', action.result.msg);
}
});
//record =form.getRecord(), //获取表单数据元素
//values = form.getValues(); //获取该表单值
//record.set(values); //修改当前的值
//Ext.getStore(store_object).sync();
//record.commit();
//win.close(); //关闭编辑框
}
}}
]
});
});
</script>
</body>
</html>
package com.xxx.web.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.xxx.dao.mapper.SysUserMapper;
import com.xxx.model.SysUser;
import com.xxx.model.SysUserCriteria;
@Controller
@RequestMapping(value="/user")
public class UserController {
private static final Logger logger = Logger.getLogger(UserController.class);
@Resource
private SysUserMapper sys_user_dao;
@RequestMapping(value="/listbypage")
@ResponseBody
public Map<String,Object> listByPage(@RequestParam("start") int start,@RequestParam("limit") int pageSize,@RequestParam("page") int pageIndex){
Map<String,Object> result=new HashMap<String,Object>();
SysUserCriteria ex=new SysUserCriteria();
ex.setPageSize(pageSize);
ex.setPageIndex(pageIndex);
ex.setOrderByClause("user_id");
List<SysUser> list_data=null;
try {
list_data=sys_user_dao.selectPage(ex);
result.put("listData", list_data);
if (logger.isDebugEnabled()){
logger.debug("取得分页结果记录行数:"+list_data.size());
}
} catch (Exception e) {
if (logger.isDebugEnabled()){
logger.error(e.getMessage(), e);
}
result.put("success", false);
result.put("msg", "保存失败!数据库操作异常!");
result.put("totalRecordCount", 0);
result.put("listData", list_data);
return result;
}
//取得满足查询条件的记录总数
try {
int record_count=sys_user_dao.countByExample(ex);
result.put("totalRecordCount", record_count);
} catch (Exception e) {
result.put("totalRecordCount", 0);
if (logger.isDebugEnabled()){
logger.error(e.getMessage(), e);
}
}
return result;
}
@RequestMapping(value="/add")
@ResponseBody
public Map<String,Object> add(SysUser user){
Map<String,Object> result=new HashMap<String,Object>();
int rec_changed=0;
try {
rec_changed=sys_user_dao.insert(user);
} catch (Exception e) {
if (logger.isDebugEnabled()){
logger.error(e.getMessage(), e);
}
result.put("success", false);
result.put("msg", "保存失败!数据库操作异常!");
return result;
}
if (rec_changed>0){
result.put("success", true);
result.put("msg", "保存成功!");
}else{
result.put("success", false);
result.put("msg", "保存失败!");
}
return result;
}
@RequestMapping(value="/edit")
@ResponseBody
public Map<String,Object> edit(SysUser user){
Map<String,Object> result=new HashMap<String,Object>();
int rec_changed=0;
try {
rec_changed=sys_user_dao.updateByPrimaryKey(user);
} catch (Exception e) {
if (logger.isDebugEnabled()){
logger.error(e.getMessage(), e);
}
result.put("success", false);
result.put("msg", "保存失败!数据库操作异常!");
return result;
}
if (rec_changed>0){
result.put("success", true);
result.put("msg", "保存成功!");
}else{
result.put("success", false);
result.put("msg", "保存失败!");
}
return result;
}
@RequestMapping(value="/del")
@ResponseBody
public Map<String,Object> del(@RequestParam("id") Integer userId){
Map<String,Object> result=new HashMap<String,Object>();
int rec_changed=0;
try {
rec_changed=sys_user_dao.deleteByPrimaryKey(userId) ;
} catch (Exception e) {
if (logger.isDebugEnabled()){
logger.error(e.getMessage(), e);
}
result.put("success", false);
result.put("msg", "删除失败!数据库操作异常!");
return result;
}
if (rec_changed>0){
result.put("success", true);
result.put("msg", "删除成功!");
}else{
result.put("success", false);
result.put("msg", "删除失败!");
}
return result;
}
}
以下为登录的extjs
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//以下自定义一个vtype输入校验规则
Ext.apply(Ext.form.field.VTypes, {
//使用正则表达式
validcode:function(value,field){
var regEx=/^\d{4}$/; //4位数字
return regEx.test(value);
},
validcodeText:"请输入正确的验证码",
validcodeMask:/[0-9-]/ //限制键盘的输入
});
var login_form=new Ext.create('Ext.form.FormPanel',{
bodyStyle:'padding-top:20px;padding-left:20px;',
defaultType:'textfield',
labelAlign:'right',
width:'auto',
height : 150,
frame : true,
buttonAlign:'center',
defaults : {
allowBlank : false,
autowidth : true,
labelAlign:'right',
width : 210,
vtype:'alphanum' //缺省只能输入字母和数字
},
items:[
{fieldLabel:'登录名称',id:'loginName',name:'loginName',height:20,blankText:'请输入登录名称'},
{fieldLabel:'登录密码',id:'loginPass',name:'loginPass',inputType:'password', height:20,blankText:'请输入登录密码'},
{fieldLabel:'校验码',id:'validCode',name:'validCode',vtype:'validcode', width : 180,height:20,blankText:'请输入校验码',minLength:4,maxLength:4,minLengthText:'校验码不能少于4个',maxLengthText:'校验码不能多于4个数字'}
],
buttons:[
{xtype:'button',text:'重输',handler:function(){this.up("form").getForm().reset();}},
{xtype:'button',text:'登录',handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url:GLOBAL_ROOT_PATH+'/login/checklogin',
waitTitle : '提示',//标题
waitMsg : '正在提交数据请稍候...',//提示信息
success: function(form, action) {
window.location.href=action.result.mainurl;
//Ext.Msg.alert('成功', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('错误', action.result.msg);
}
});
}
}}
]
});
var login_window=new Ext.create('Ext.window.Window',{
title:'用户登录',
width : 300,
collapsible:false,
closable:false,
resizable:false,
modal:true,
draggable:false,
shadow :true,
items:[login_form]
});
login_window.show();
//创建验证码
Ext.core.DomHelper.insertAfter( Ext.get('validCode'), {
tag: 'img',
id:'checkimg',
name:'checkimg',
src: GLOBAL_ROOT_PATH+'/html/validcode.jsp?id='+new Date().getTime(),
align: 'absbottom',
style: 'position: absolute;left: 200px;top: 70px;'
} );
Ext.get('checkimg').on({
'click':{fn:function(){
this.src=GLOBAL_ROOT_PATH+'/html/validcode.jsp?id='+new Date().getTime();
}}});
});