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） 注：前面开篇知识不足的同学请自觉充电。

连载中，请大家继续关注！本文出自我的个人网站思考者日记网