ExtJS4.2學習(20)動態數據表格以前幾章總結篇1

本節採用技術：SpringMVC+Jetty+ExtJs4.2+Maven+MySQL5.1以上+SLF4J（前幾節學習的你們不知道記住了沒，如今來總結複習下，順便加點新技術）

學習本節前的準備：Eclipse高版本，Jetty插件，Maven插件，JDK1.7

休息了很久沒開動教程了，確實最近太累了，你們見諒！先來看下效果，本章節是連續篇，今天是續篇的第一講，前面都是靜態講解，你們是否是以爲不過癮啊？咱學Java的嘛，固然得和Java的技術結合講解咯，前面也說到之後會用動態數據講解的。1、準備工做，建立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', '男');

2、搭好框架，後面我會提供源代碼給你們下載的

3、最終效果，主要是框架中間的數據展現

 前臺界面代碼（這裏給出的是數據展現層代碼，所有代碼能夠在文章結尾處下載）：

// 表格配置開始
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） 注：前面開篇知識不足的同窗請自覺充電。

連載中，請你們繼續關注！本文出自個人我的網站思考者日記網