通过学习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
整体效果如下图：
相关推荐
SpringMVC作为Spring框架的一部分，是Java企业级应用中常用的MVC（Model-View-Controller）架构模式实现。它简化了处理HTTP请求和响应的过程，使得业务逻辑与视图层分离，提高了代码的可维护性和可测试性。在财务...
《基于Extjs+Mysql+SpringMVC+MyBatis的通用后台管理系统详解》 在当前信息化社会中，后台管理系统是企业管理与运营的核心工具之一。本文将深入探讨一个使用Extjs作为前端框架，Mysql作为数据库，SpringMVC作为控制...
标题 "extjs+springmvc+dubbo+mybatis+oracle" 描述了一个综合性的企业级Web应用架构，结合了前端、后端服务以及数据库技术。这个架构由以下几部分组成： 1. **ExtJS**：这是一个JavaScript库，用于构建富客户端...
SpringMVC+ExtJS4.2是Web开发中一种经典的前后端组合，它们共同构建了高效、用户友好的企业级应用程序。在这个项目中，我们主要关注如何利用这两个框架实现用户管理的基本操作，包括增、删、改、查（CRUD）功能。 ...
通用后台管理系统(ExtJS4.2+Hibernate4.1.7+SpringMVC3.2.8).pdf
标题“extjs3+springMVC上传文件”指的是使用ExtJS 3版本的JavaScript库与Spring MVC框架结合实现文件上传功能。这篇博文可能是作者在ITEYE博客上分享的一个技术实践，遗憾的是，描述部分为空，没有提供额外的信息。...
毕业设计是高等教育阶段学生在完成学业前所进行的一项重要学术任务，旨在检验学生通过学习所获得的知识、技能以及对特定领域的深刻理解能力。这项任务通常要求学生运用所学专业知识，通过独立研究和创新，完成一个...
基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架
在本项目中，我们探索了如何整合Spring MVC、iBatis、ExtJS和MySQL数据库来构建一个高效且用户友好的Web应用。这是一个经典的Java技术栈组合，广泛应用于现代企业级开发。 **Spring MVC** 是Spring框架的一个模块，...
本实例为ExtJS4.2.1 MVC 和 SpringMVC3.0.5 基于注解模式下的开发实例，是桌面型的应用程序，包含全部需要的jar包，定义了项目的基于架构和实现，可在MyEclipse10打开和部署，对于有需要在该环境下进行开发的人员，...
EXTJS的组件通过Ajax请求与SpringMVC的RESTful接口进行通信，获取或提交数据。EXTJS的Store负责数据缓存和异步加载，与Hibernate的ORM机制相结合，实现了数据的透明处理。此外，EXTJS的Model可以与后台的Java Bean...
extjs+asp+access 实例, 用IIS 即可立即调试 详细请看里面说明 同时,打包文件有个extjs3.0的javascript包,里面有个example文件夹,很多都可以copy过来改成自己的代码
extjs视频教程，基于spring+springMvc+mybatis框架开发，适合初学者，跟着视频教程入门
这是本人自己总结最好用的通用后台管extjs+MySQL+oracle+SQL server数据库源码：主要运用了一下的知识： 1、主要运用的后台框架是extjs， 2、jsp+hibernate+Struts2+spring+ajax+jQuery， 3、用到了Java面向对象的...
ExtJs+3.0+最新最全中文API帮助文档+CHM版@156_25590.exe
在本框架中，ExtJS负责处理用户界面的展示和交互，通过Ajax技术与后台进行异步通信，实现数据的动态加载和实时更新。 ASP.NET是微软的Web开发平台，它包含了开发和部署基于Web的应用程序所需的所有工具和服务。ASP...
网上有些这样的例子，但是下了几个都没有跑起来，哎，希望那些发文章的人要发就发全的，别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传，没法上传图片无法看到效果，直接上源码吧。
Struts2与ExtJS结合，可以实现前后端的交互。在源代码中，你会看到Struts2的动作类、结果配置以及拦截器的使用，这些都是构建Web应用的关键部分。 Spring框架则是Java企业级应用的核心，它提供了依赖注入（DI）和...
在本整合中，ExtJS 4将用于创建用户界面，与Spring MVC通过Ajax进行数据交换，实现动态更新和交互。 整合过程中，我们需要做以下关键步骤： 1. 配置Spring：设置Spring的上下文配置，包括数据源、Hibernate ...
extJs 跟mxgraph一样都是一种前台框架，可以混着用，这个例子将结合extjs + mxgraph 做网络拓扑图。mxgraph是将html的页面元素当做一个容器（container），并在此容器中画图的，而extJs也是将此容器包装成一个window...