Extjs MVC 与 Spring MVC 交互分页的实现

注意点一：Extjs的store层

Ext.define('AM.store.Students', {
extend: 'Ext.data.Store',
model: 'AM.model.Student',

//http://docs.sencha.com/ext-js/4-1/#!/example/restful/restful.html
autoLoad: true,//store.load();
autoSync: true,//需要同步
pageSize:3,  //每页显示的记录行数

    listeners: {
    write: function(store, operation){
            var record = operation.getRecords()[0],
                name = Ext.String.capitalize(operation.action),
                verb;
                
            if (name == 'Destroy') {
                record = operation.records[0];
                verb = 'Destroyed';
            } else {
                verb = name + 'd';
            }
            console.log(Ext.String.format("{0} Student: {1}", verb, record.getId()));
        }, 
        
    exception: function(proxy, type, action, options, res){
        Ext.Msg.show({
        title: 'ERROR',
        msg: res.message,
        icon: Ext.MessageBox.ERROR,
        buttons: Ext.Msg.OK
        });            
        }
    }
});

注意点二：Extjs的model层

var myjson = Ext.create('Ext.data.writer.Json', {
    encode: true,
    writeAllFields: true
});
Ext.namespace("AM.model"); 
//服务器无需传输所有字段
Ext.define('AM.model.Student', {
    extend: 'Ext.data.Model',
    
    //http://archive.cnblogs.com/a/2571796/
    statics: {//注意不是static
    addRecord : function(store){
    var fields = this.getFields();
        store.each(function(record) { 
        fields[fields.length] =  {
                name: record.get('fieldKey'),
                type: record.get('dataType')
            };
        }); 
    }
    },

    fields: [
             //需要与Java注入类的各个字段类型相同，否则不能成功创建注入对象
             {name: 'student_id',type:'int'},
             {name: 'innoGroupId',type:'int'},
             {name: 'username'},
             {name: 'password'},
             {name: 'name'},
             {name: 'email'},
             {name: 'unikey'},
             {name: 'mobile'},
             {name: 'phone'},
             {name: 'type'},
             {name: 'innoGroupAccepted', type: 'boolean', defaultValue: false},
             {name: 'applyConfirmed', type: 'boolean', defaultValue: false},
             {name: 'fileConfirmed',type: 'boolean', defaultValue: false},
             {name: 'payConfirmed',type: 'boolean', defaultValue: false},
             {name: 'examConfirmed', type: 'boolean', defaultValue: false},
             {name: 'accepted',type: 'boolean', defaultValue: false},
             
             //append
             {name: 'namePy'},
             {name: 'sex',                        type: 'boolean',},
             {name: 'certificateType'},
             {name: 'certificateId'},
             {name: 'nativePlace'},
             {name: 'birthdate'},
             {name: 'birthPlace'},
             {name: 'homePlace'},
             {name: 'archivePlace'},
             {name: 'rewardPunishment'},
             {name: 'household'},
             {name: 'college'},
             {name: 'major'},
             {name: 'ethnic'},
             {name: 'graduateTime'},
             {name: 'bachelorId'},
             {name: 'studyNumber'},
             {name: 'political'},
             {name: 'degree'},
             {name: 'english',type:'int'},
             {name: 'politics',type:'int'},
             {name: 'math',type:'int'},
             {name: 'cs',type:'int'},
             {name: 'total',type:'int'},
             {name: 'remark'},
          ],  
          idProperty: 'student_id',
         
          proxy : {
            type: 'rest',
            url: 'student',
            

            reader :
                {
                type : 'json',
                root : 'data',
                successProperty : 'success',
                totalProperty: 'total'
                },

            writer :
                {
                type : 'json',
                //encode: true,extjs-4中的Ext.data.writer.Writer没有该属性
                writeAllFields: true
                }
          }
});

注意点二.五：Extjs的model层

var sm = Ext.create('Ext.selection.CheckboxModel');

Ext.define('AM.view.student.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.studentList',
    //title : 'All student',
    store: 'Students',
    selModel: sm,
    
    
    dockedItems : [{  
        xtype : 'toolbar', dock : 'top',  
        items : [{  
                    text : '添加',  
                    itemId: 'addButton',
                    iconCls : 'add',  
                    action: 'add' 
                }, '-',  {  
                    text : '删除',  
                    itemId: 'removeButton',
                    iconCls : 'remove',  
                    action: 'remove' ,
                    disabled : true  
                },
        ]  
    }, {  
    dock : 'bottom', 
        xtype : 'pagingtoolbar',  
        id : 'pt',  
        store : 'Students',//Ext.getStore('Students'), // 分页store与grid一致  
        displayInfo : true,  
    }],

    

    initComponent: function() {
      this.columns = [//需要将columns写出来
      {header: '编号',  dataIndex: 'student_id', width:35},
      {header: '姓名',  dataIndex: 'name',  width:60,flex:1},
      {header: '准考证号',  dataIndex: 'unikey',  width:80,flex:1},
      {header: '考生类别',  dataIndex: 'type',  width:60,flex:1},
      {header: '性别',  dataIndex: 'sex',  width:35},
      {header: '毕业院校',  dataIndex: 'college',  width:120,flex:1},
      {header: '专业', dataIndex: 'major', width:100,flex:1},
      {header: '民族',  dataIndex: 'ethnic',  width:40},
      {header: '毕业时间',  dataIndex: 'graduateTime',  width:60,flex:1},
      {header: '英语',  dataIndex: 'english',  width:35},
      {header: '政治',  dataIndex: 'politics',  width:35},
      {header: '数学',  dataIndex: 'math',  width:35},
      {header: '综合',  dataIndex: 'cs',  width:35},
      {header: '总分',  dataIndex: 'total',  width:50},
  ];

        //CARE store必须要初始化
var store = Ext.getStore('init.AutoTables');
console.log(store);
console.log('this.columns.length =  '+this.columns.length);
console.log(this.columns); 
var columns = this.columns;//此处位引用赋值
var me = this;

//TODO 必须使得该函数运行结束才可执行后面的语句
store.load({
//scope: this,
    callback: function(records, options, success){
    if(success){
store.each(function(record) { 
        //console.log(columns.length);
        columns.push({
        header: record.get('header'),
        dataIndex: record.get('dataIndex'),
        width : record.get('width')
        });
        });
console.log('columns.length =  '+columns.length);
console.log(columns); 
me.columns = columns;
console.log('memem.length =  '+ me.columns.length);
console.log(me.columns); 
console.log(me);
//me.callParent(arguments);//Uncaught TypeError: Cannot read property 'superclass' of undefined 
    }
    },
    });
        console.log('out initComponent 2150');
        this.callParent(arguments);
    }
});

注意点三：后台Spring MVC中Json数据处理

package com.enrol.util;

import java.security.MessageDigest;
import java.util.HashMap;
import java.util.Map;

public class DataUtil {
public static Map<String, Object> getMap(Object contact,int total) {
Map<String, Object> modelMap = new HashMap<String, Object>(3);

System.out.println("OK!!!!!");
modelMap.put("data", contact);
modelMap.put("success", true);
modelMap.put("total", total);

return modelMap;
}

public static Map<String, Object> getModelMapError(String msg) {
Map<String, Object> modelMap = new HashMap<String, Object>(2);
modelMap.put("message", msg);
modelMap.put("success", false);

return modelMap;
}

public static String MD5(String s) {
char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f' };
try {
byte[] strTemp = s.getBytes();
MessageDigest mdTemp = MessageDigest.getInstance("MD5");
mdTemp.update(strTemp);
byte[] md = mdTemp.digest();
int j = md.length;
char str[] = new char[j * 2];
int k = 0;
for (int i = 0; i < j; i++) {
byte b = md[i];
str[k++] = hexDigits[b & 0xf];
}
return new String(str);
} catch (Exception e) {
return null;
}
}

}

注意点四:Spring MVC中 Controller层用到分页的方法：

@RequestMapping(method = RequestMethod.GET)
public @ResponseBody
Map<String, ? extends Object> view(int page,int start,int limit) throws Exception {
System.out.println("get");
System.out.println("-----------------------------------");
System.out.println("page=="+page);
System.out.println("start=="+start);
System.out.println("limit=="+limit);//pagesize
System.out.println("-----------------------------------");
page = (page-1)*limit;
HashMap<String,Integer> maps = new HashMap<String, Integer>();
maps.put("page", page);
maps.put("limit", limit);
try {
int total = studentMapper.getTotal();
List<HashMap<String, ?>> list = studentMapper.getStudents(maps);
System.out.println("length= " + list.size());
for (HashMap<String, ?> obj : list) {
System.out.println("map: " + obj);
}

return DataUtil.getMap(list,total);
} catch (Exception e) {
e.printStackTrace();
return DataUtil
.getModelMapError("Error retrieving students from database.");
}
}