通过学习springMVC ，下面是extjs 整合springmvc 和 ibatis 实现的一个gridpanel 的 增删改查以及动态分页：
目前将前提Extjs 代码 和 springMvc 的控制层（control）的实现为大家提供，其业务层的实现也是比较简单的只是借助于ibatis 实现数据操作。
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
</head>
<title>spring mvc + extjs test</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/extjs/resources/css/ext-all-gray.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/extjs/ext-all-dev.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//分页条数
var itemsPerPage = 5;
var searchtext=null;
var bj=1;//区分新增修改标识
var store=Ext.create('Ext.data.Store', {//数据源
storeId:'simpsonsStore',
pageSize:itemsPerPage,//每页显示条数
fields:['emp_id', 'name', 'age'],
proxy: {
type: 'ajax',
url:'empList.do',
actionMethods: {
read: 'post'
},
reader: {
type: 'json',
totalProperty : 'totalCount',//总条数
root: 'paginationDtos'// 数据根节点
}
}
});
//数据加载
store.load({
params:{
seachKey:searchtext,
start:0,
limit: itemsPerPage
}
});
//常用grid
var grid=Ext.create('Ext.grid.Panel', {
title: '常用Grid',
store: store,//store
selModel:Ext.create('Ext.selection.CheckboxModel'),//checkbox
columns: [//列
{xtype: 'rownumberer'},
{ text: '编号', dataIndex: 'emp_id' },
{ text: '姓名', dataIndex: 'name'},
{ text: '年龄', dataIndex: 'age' }
],
height: 400,
width: 800,
tbar:[{
xtype:'button',
//draggable:true,是否可以拖动
text:'新增',
handler:function(){
bj = 1;//标记为新增
win.setTitle("员工新增");
win.show();
}
},
{ xtype: 'tbseparator' },
{
text : '修改',
handler : function() {
var selection = grid.getSelectionModel().getSelection();
if(selection.length!=1){
Ext.MessageBox.alert("提示","请选择一条记录！");
return;
}
win.setTitle("员工修改");
formPanel.getForm().findField('name').setValue(selection[0].get("name"));
formPanel.getForm().findField('age').setValue(selection[0].get("age"));
win.show();
bj=2;//设置标记为修改
}
},
{ xtype: 'tbseparator' },
{
xtype:'button',
text:'删除',
handler:function(){
var selection = grid.getSelectionModel().getSelection();
if(selection.length !=1){
Ext.MessageBox.alert("提示","请选择一条记录！");
return;
}
Ext.MessageBox.confirm("提示",'您是否确认删除？',function(e){
if(e=='yes'){
//调用删除方法
deleteEmpById(selection[0].get('emp_id'),store);
}
});
}
},
{
xtype: 'tbseparator'
},
{
xtype:'label',
text:'请输入关键词：'
},
{
xtype:'textfield',
id:'KeyWord'
},
{
text:'搜索',
handler:function(){
searchtext = Ext.getCmp("KeyWord").getValue();
//Ext.MessageBox.alert("提示",searchtext);
//grid.store.pageNum = 1; //向后台传的页面
//grid.store.seachKey = searchtext; //给Store中的条件赋值，
store.load({
method : 'POST',
params:{
seachKey:searchtext,
start:0,
limit: itemsPerPage
}
}); //加载后显示第一页
}
}
],
bbar: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: store,
//displayMsg:'显示第{0}条数据到{1}条数据,一共有{2}条',
emptyMsg:"没有符合的数据",
displayInfo: true
}
],
renderTo:'gridPanel'
});
var formPanel=Ext.create('Ext.form.Panel',{
layout:'form',
height:400,
width:350,
frame:true,
items:[
{
xtype:'textfield',
fieldLabel:'姓 名',
name:'name',
allowBlank: false
},
{
xtype:'numberfield',
fieldLabel:'年 龄',
name:'age',
width :250,
anchor: '100%',
maxValue: 200,
minValue: 1,
allowBlank: false
}],
buttons:[
{
xtype:'button',
text:'提交',
handler:function(){
if (formPanel.getForm().isValid()){
if(bj ==1){
addEmp(formPanel,win,store);
}else if(bj==2){
var selection = grid.getSelectionModel().getSelection();
if(selection.length!=1 ){
Ext.MessageBox.alert("提示","请选择一条记录！");
return;
}
var id = selection[0].get("emp_id");
updateEmp(id,formPanel,win,store)
}
}
}
},
{
xtype:'button',
text:'重置',
handler:function(){
formPanel.getForm().reset();
}
}]
});
Ext.define('windFrom',{
extend:'Ext.window.Window',
title: '新增/修改员工信息',
height: 400,
width: 350,
layout: 'fit',
buttonAlign: 'center' ,
closable: true , //是否可关闭
collapsible: true , //是否可收缩
draggable: true ,
resizable: false ,
closeAction:'hide',
modal:true,
items: [formPanel],
listeners:{
hide:function(){
formPanel.getForm().reset();
}
}
});
var win=Ext.getCmp("windFromId");//获取win
if(!win){
win=Ext.create('windFrom');
}
//定义员工新增函数
function addEmp(empForm,win,store){
Ext.Ajax.request({
url : 'empAdd.do',
headers: {'Content-Type':'application/json; charset=utf-8'},
jsonData : {
'name' : empForm.getForm().findField('name').getValue(),
'age' : empForm.getForm().findField('age').getValue()
} ,
success : function(response, opts) {
var result = Ext.decode(response.responseText);
if(result.success){
Ext.MessageBox.alert("提示",result.msg);
win.hide();
store.load();//数据重新加载
}else{
Ext.MessageBox.alert("提示",result.msg);
}
},
failure : function(response, opts) {
Ext.MessageBox.alert("提示","链接失败！");
}
});
}
//修改员工信息
function updateEmp(id,empForm,win,store){
Ext.Ajax.request({
url : 'updateEmp.do',
headers: {'Content-Type':'application/json; charset=utf-8'},
jsonData : {
'emp_id':id,
'name' : empForm.getForm().findField('name').getValue(),
'age' : empForm.getForm().findField('age').getValue()
} ,
success : function(response, opts) {
var result = Ext.decode(response.responseText);
if(result.success){
Ext.MessageBox.alert("提示",result.msg);
win.hide();
store.load();//数据重新加载
}else{
Ext.MessageBox.alert("提示",result.msg);
}
},
failure : function(response, opts) {
Ext.MessageBox.alert("提示","链接失败！");
}
});
}
//更加员工Id 进行删除
function deleteEmpById(id,store){
Ext.Ajax.request({
url : 'deleteEmp.do',
/*headers: {'Content-Type':'application/json; charset=utf-8'},
jsonData : {
'emp_id':id,
'name' : empForm.getForm().findField('name').getValue(),
'age' : empForm.getForm().findField('age').getValue()
} , */
params:{"id":id},
success : function(response, opts) {
var result = Ext.decode(response.responseText);
if(result.success){
Ext.MessageBox.alert("提示",result.msg);
win.hide();
store.load();//数据重新加载
}else{
Ext.MessageBox.alert("提示",result.msg);
}
},
failure : function(response, opts) {
Ext.MessageBox.alert("提示","链接失败！");
}
});
}
});
</script>
<body>
<h1>Hello world</h1>
<h1>gridPanel</h1>
<p>这里列举了常用的 gridPanel</p>
</br>
<p>
<b>常用 gridPanel（适用于查询列表）</b>
<p></p>
<div id="gridPanel"></div>
</p>
</body>
</html>
--- 控制层（Control）
@Controller
@RequestMapping("/springmvctest")
public class EmpController {
/**
* 注入 empServices
*/
@Autowired
private IEmpServices empServices;
@RequestMapping("/index")
public ModelAndView addEmp(){
ModelAndView view = new ModelAndView();
view.setViewName("springmvctest/index");
//异常测试
//String str=null;
//try{
//str.toString();
//}catch(Exception e){
//throw new TypeMismatchAccessException(e);
//}
return view;
}
@RequestMapping(value ="/empAdd",method = RequestMethod.POST)//,produces = "application/json"
@ResponseBody
public Object insertEmp(@RequestBody EmpVo empVo){
Map<String, String> map = new HashMap<String, String>();
Random rand = new Random();
empVo.setEmp_id(rand.nextInt(100000));
int i = empServices.addEmp(empVo);
if(i > 0){
map.put("success", "true");
map.put("msg", "新增成功！");
}else{
map.put("success", "false");
map.put("msg", "新增失败！");
}
JSONObject obj = (JSONObject) JSONObject.toJSON(map);
return obj;
}
@RequestMapping(value ="/updateEmp",method = RequestMethod.POST)//,produces = "application/json"
@ResponseBody
public Object updateEmp(@RequestBody EmpVo empVo){
Map<String, String> map = new HashMap<String, String>();
int i = empServices.updateEmp(empVo);
if(i > 0){
map.put("success", "true");
map.put("msg", "修改成功！");
}else{
map.put("success", "false");
map.put("msg", "修改失败！");
}
JSONObject obj = (JSONObject) JSONObject.toJSON(map);
return obj;
}
@RequestMapping(value ="/deleteEmp")//,produces = "application/json"
@ResponseBody
public Object deleteEmp(@RequestParam String id){
Map<String, String> map = new HashMap<String, String>();
int i = empServices.deleteEmpById(id);
if(i > 0){
map.put("success", "true");
map.put("msg", "删除成功！");
}else{
map.put("success", "false");
map.put("msg", "删除失败！");
}
JSONObject obj = (JSONObject) JSONObject.toJSON(map);
return obj;
}
@RequestMapping("/empList")
@ResponseBody
public PaginationDto empList(@RequestParam(required = false) String seachKey,@RequestParam int start,@RequestParam int limit){
EmpVo emp = new EmpVo();
emp.setSelectorParam(seachKey);
//try {
//emp.setSelectorParam(new String(seachKey.getBytes("ISO8859-1"),"UTF-8").toString());
//} catch (UnsupportedEncodingException e) {
//// TODO Auto-generated catch block
//e.printStackTrace();
//}
PaginationDto pt = empServices.queryEmpList(emp, start, limit);
return pt;
}
}
-- 对于 在 如下连接文章中说明了 springMVC的配置
http://wangmengbk.iteye.com/blog/2176076
--- ibatis 配置文件 springmvctest-mapper.xml 内容：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC
"-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="dpap.springmvctest.emp" >
<resultMap id="empResultMap"
type="com.deppon.dpap.module.springmvctest.shared.vo.EmpVo">
<id column="EMP_ID" property="emp_id" jdbcType="INTEGER" />
<result column="NAME" property="name"
jdbcType="VARCHAR" />
<result column="AGE" property="age" jdbcType="INTEGER" />
</resultMap>
<sql id="emp_Column_List">
EMP_ID, NAME, AGE
</sql>
<!-- 插入员工信息 -->
<insert id="addEmp"
parameterType="com.deppon.dpap.module.springmvctest.shared.vo.EmpVo">
<![CDATA[
INSERT INTO EMP_HZG (
]]>
<include refid="emp_Column_List" />
<![CDATA[
)VALUES(
#{emp_id, jdbcType=INTEGER},
#{name, jdbcType=VARCHAR},
#{age, jdbcType=INTEGER}
)
]]>
</insert>
<!-- 更新员工信息 -->
<update id="updateEmp"
parameterType="com.deppon.dpap.module.springmvctest.shared.vo.EmpVo">
UPDATE EMP_HZG
<set>
<if test="name != null and name != ''">
NAME = #{name, jdbcType=VARCHAR},
</if>
<if test="age != 0">
AGE = #{age, jdbcType=INTEGER},
</if>
</set>
<where>
<if test="emp_id !=null and emp_id != ''">
EMP_ID = #{emp_id, jdbcType=INTEGER}
</if>
</where>
</update>
<!-- 删除员工 -->
<delete id="deleteEmpById">
DELETE FROM EMP_HZG
<where>
EMP_ID = #{emp_id, jdbcType=INTEGER}
</where>
</delete>
<!-- 查询员工数量 -->
<select id="queryEmpCount" resultType="java.lang.Long"
parameterType="map">
<![CDATA[
SELECT COUNT(*)
FROM EMP_HZG
]]>
<where>
<if test="selectorParam != null and selectorParam != ''">
AND NAME LIKE CONCAT(CONCAT('%', #{selectorParam,
jdbcType=VARCHAR}), '%')
</if>
</where>
</select>
<!-- 查询员工集合 -->
<select id="queryEmpList" resultMap="empResultMap"
parameterType="com.deppon.dpap.module.springmvctest.shared.vo.EmpVo">
<![CDATA[
SELECT
]]>
<include refid="emp_Column_List" />
<![CDATA[
FROM EMP_HZG
]]>
<where>
<if test="selectorParam != null and selectorParam != ''">
AND NAME LIKE CONCAT(CONCAT('%', #{selectorParam,
jdbcType=VARCHAR}), '%')
</if>
</where>
</select>
</mapper>
以上对于 PaginationDto 对象就是 一个分页对象其属性也比较简单：
protected List paginationDtos = new ArrayList();
protected Long totalCount = 0l;
//TODO：省略 get/set
整体效果如下图：
相关推荐
Extjs+SpringMVC+MyBaits财务管控系统
使用Extjs+Mysql+SpringMVC+MyBatis开发的通用后台管理系统，里面包含用户管理、权限管理、角色管理等通用功能。
项目分客户端exjst+springmvc+dubbo，服务端dubbo+mybatis，数据库oracle，纯注解配置，具有完善的事务控制，各种层的拦截器，分页。
做了一个简单的springmvc+ibatis+extjs的例子，接下来我还会继续的完善它，我用tomcat的端口是8088,你要改一下, email:lingo169@yahoo.com
Spring3.0+Hibernate4.0+SpringMVC整合ExtJS4是一个集成的应用系统，希望对学习javaweb和extjs的朋友有帮助
通用后台管理系统(ExtJS4.2+Hibernate4.1.7+SpringMVC3.2.8).pdf
该程序是我耗时两周时间，边学边做而成，侧重Extjs方面，springMVC和hibernate只是简单的使用，如有错误，请忽略。 该项目只做大家学习使用，懂得分享，才能学到更多。
JavaWeb+Extjs+springMvc+mybatis做的信息管理系统，主要是用Extjs实现前台，其中包括了树形结构和基本的表单和列表等，springMVC框架，数据库操作层使用的是mybatis，其中的数据库表结构可以根据其中的mapper.xml...
毕业设计是高等教育阶段学生在完成学业前所进行的一项重要学术任务，旨在检验学生通过学习所获得的知识、技能以及对特定领域的深刻理解能力。这项任务通常要求学生运用所学专业知识，通过独立研究和创新，完成一个...
基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架
Extjs+hibernate+struts2+spring案例大全源代码，适合初学者下载使用，欢迎大家下载，欢迎大家交流
freemarke+springmvc+mybatis+spring+shiro+extjs
本实例为ExtJS4.2.1 MVC 和 SpringMVC3.0.5 基于注解模式下的开发实例，是桌面型的应用程序，包含全部需要的jar包，定义了项目的基于架构和实现，可在MyEclipse10打开和部署，对于有需要在该环境下进行开发的人员，...
EXTJS + Struct +mysql 数据库脚本包含在类 json实现前台后台数据通信
extjs+asp+access 实例, 用IIS 即可立即调试 详细请看里面说明 同时,打包文件有个extjs3.0的javascript包,里面有个example文件夹,很多都可以copy过来改成自己的代码
extjs视频教程，基于spring+springMvc+mybatis框架开发，适合初学者，跟着视频教程入门
ExtJs+3.0+最新最全中文API帮助文档+CHM版@156_25590.exe
ssh+extjs+mysql整合
NULL 博文链接：https://zxf-noimp.iteye.com/blog/630528
网上有些这样的例子，但是下了几个都没有跑起来，哎，希望那些发文章的人要发就发全的，别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传，没法上传图片无法看到效果，直接上源码吧。