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', '男');

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

QQ截图20140218230857.jpg

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

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

// 表格配置开始

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);

    }
}

本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1408303，如需转载请自行联系原作者