ExtJS4.2学习(20)动态数据表格之前几章总结篇1 推荐

本节采用技术：SpringMVC+Jetty+ExtJs4.2+Maven+MySQL5.1以上+SLF4J（前几节学习的大家不知道记住了没，现在来总结复习下，顺便加点新技术）学习本节前的准备：Eclipse高版本，Jetty插件，Maven插件，JDK1.7休息了好久没开动教程了，确实最近太累了，大家见谅！先来看下效果，本章节是连续篇，今天是续篇的第一讲，前面都是静态讲解，大家是不是觉得不过瘾啊？咱学Java的嘛，当然得和Java的技术结合讲解咯，前面也说到以后会用动态数据讲解的。一、准备工作，创建MySQL数据库shuyangyang

/*
Navicat MySQL Data Transfer

Source Server         : localhost
Source Server Version : 50133
Source Host           : localhost:3306
Source Database       : shuyangyang

Target Server Type    : MYSQL
Target Server Version : 50133
File Encoding         : 65001

Date: 2014-02-18 23:04:49
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `t_users`
-- ----------------------------
DROP TABLE IF EXISTS `t_users`;
CREATE TABLE `t_users` (
`ID` int(255) NOT NULL AUTO_INCREMENT,
`Name` varchar(255) DEFAULT NULL,
`age` smallint(6) DEFAULT NULL,
`Address` varchar(255) DEFAULT NULL,
`CardID` varchar(255) DEFAULT NULL,
`Role` varchar(255) DEFAULT NULL,
`DepartMent` varchar(255) DEFAULT NULL,
`Sex` varchar(255) DEFAULT NULL,
PRIMARY KEY (`ID`)
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of t_users
-- ----------------------------
INSERT INTO t_users VALUES ('1', '张三', '20', '北京市海淀区', '342425199002131239', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('2', '李四', '22', '上海市长宁区', '342425199107203116', '管理员', '管理组', '女');
INSERT INTO t_users VALUES ('3', '王五', '24', '南京市', '3426198920314669', '客服人员', '客服组', '女');
INSERT INTO t_users VALUES ('4', '赵大头', '23', '南通市', '3424198805134567', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('5', '孙国', '21', '山东省', '3526199001234569', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('6', '测试', '26', 'test', '456489731312123', 'test', 'test', '男');
INSERT INTO t_users VALUES ('7', '张三1', '20', '北京市海淀区', '342425199002131239', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('8', '李四1', '22', '上海市长宁区', '342425199107203116', '管理员', '管理组', '女');
INSERT INTO t_users VALUES ('9', '王五1', '24', '南京市', '3426198920314669', '客服人员', '客服组', '女');
INSERT INTO t_users VALUES ('10', '赵大头1', '23', '南通市', '3424198805134567', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('11', '孙国1', '21', '山东省', '3526199001234569', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('12', '测试1', '26', 'test', '456489731312123', 'test', 'test', '男');
INSERT INTO t_users VALUES ('13', '张三2', '20', '北京市海淀区', '342425199002131239', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('14', '李四2', '22', '上海市长宁区', '342425199107203116', '管理员', '管理组', '女');
INSERT INTO t_users VALUES ('15', '王五2', '24', '南京市', '3426198920314669', '客服人员', '客服组', '女');
INSERT INTO t_users VALUES ('16', '赵大头2', '23', '南通市', '3424198805134567', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('17', '孙国2', '21', '山东省', '3526199001234569', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('18', '测试2', '26', 'test', '456489731312123', 'test', 'test', '男');

二、搭好框架，后面我会提供源代码给大家下载的



三、最终效果，主要是框架中间的数据展示


前台界面代码（这里给出的是数据展示层代码，全部代码可以在文章结尾处下载）：

// 表格配置开始
var columns = [
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'年龄',dataIndex:'age'},
{header:'性别',dataIndex:'sex',renderer:function(value){
if(value=='男'){
return "<span style='color:green;font-weight:bold';>男</span>";
} else {
return "<span style='color:red;font-weight:bold';>女</span>";
}
,
{header:'地址',dataIndex:'address'},
{header:'身份证号码',dataIndex:'cardId',width:150},
{header:'角色',dataIndex:'role'},
{header:'部门',dataIndex:'departMent'}
];

//转换原始数据为EXT可以显示的数据
var store = new Ext.data.Store({
pageSize:13, //每页显示几条数据
proxy:{
type:'ajax',
url:'/user/showUser',
reader:{
type:'json',
totalProperty:'total',
root:'data',
idProperty:'id'
}
},
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:'name'},
{name:'age'},
{name:'sex'},
{name:'address'},
{name:'cardId'},
{name:'role'},
{name:'departMent'}
]
});

var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
title: '数据',
region: 'center', //框架中显示位置，单独运行可去掉此段
loadMask:true, //显示遮罩和提示功能,即加载Loading……
//forceFit:true //自动填满表格
bbar:new Ext.PagingToolbar({
store:store,
displayInfo:true, //是否显示数据信息
displayMsg:'显示第 {0} 条到 {1} 条记录，一共  {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据
emptyMsg: "没有记录" //没有数据时显示信息
})
});
/加载数据
store.load({params:{start:0,limit:13}});
// 表格配置结束

这里的url请求地址是/user/showUser，这里请求的是SpringMVC的地址，看下面的Controller代码：

package com.shyy.web.controller.anntation;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.shyy.web.controller.response.EmptyResponse;
import com.shyy.web.controller.response.NormalResponse;
import com.shyy.web.controller.response.Response;
import com.shyy.web.entity.User;
import com.shyy.web.service.UserService;
import com.shyy.web.service.impl.UserServiceImpl;

@Controller
@RequestMapping("/user/")
public class UserController {

Logger logger = LoggerFactory.getLogger(UserController.class);

UserService userService = new UserServiceImpl();

/**
* SpringMVC返回json数据
* @return
*/
@RequestMapping("showUser")
@ResponseBody
public Response resp(HttpServletRequest req, HttpServletResponse resp){
String start = req.getParameter("start");//起始页
String limit = req.getParameter("limit");//每页数量
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
List<User> list = userService.query(index,pageSize); //获取所有用户数据
long total = list.size();
if(total>0){
logger.debug("now {}" , "返回用户数据。。。");
return new NormalResponse(list,userService.total());
}else{
logger.debug("now {}" , "用户数据为空！");
return new EmptyResponse();
}

}
}

最后的NormalResponse返回的是我封装的一个返回对象，如下代码所示：

package com.shyy.web.controller.response;

public class NormalResponse extends Response {

public NormalResponse(Object data) {
this.setCode(ResponseCode.OK);
this.setMessage("");
this.setData(data);
this.setSuccess(true);
}

public NormalResponse(Object data, Long total) {
this.setCode(ResponseCode.OK);
this.setMessage("");
this.setData(data);
this.setSuccess(true);
this.setTotal(total);
}

public NormalResponse() {
this.setCode(ResponseCode.OK);
this.setMessage("");
this.setData(null);
this.setSuccess(true);
}
}

源码下载：【点我下载】（里面包含了我前几章讲解的部分源码，运行本节地址为：http://localhost:8090/demo/index.jsp） 注：前面开篇知识不足的同学请自觉充电。
连载中，请大家继续关注！本文出自我的个人网站思考者日记网