跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])
浏览数：38 /
时间：2015年06月09日
跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])
写了几个月，总算有点盼头了，终于要从后台取得数据了。后台的spring mvc 和 service 只能简单的说说了，里面加了几十个类，有兴趣的下载了源码自己看。下面画张通用的模块列表取数据的流程，这个流程是适用于所有的模块。我这个后台处理程序也是对所有的模块进行统一处理，包括数据查找，新增，修改，删除都是相同的。
画图不是强项，看得懂就行。
1、grid在渲染好后就会通过Stroe来取得数据；
2、Stroe会发送ajax请求至后台服务器，spring mvc 会根据请求找到 ModuleController 中的相应取得数据的函数；
3、控制器中调用ModuleService中的函数取得数据；
4、Service再调用 ModuleDAO的函数从数据库中取得数据，然后一级级的返回到Store中，再显示在Grid之中。
现在我们先做extjs5端的修改，原来的Store使用的是本地数据，现在要改成远程调用的数据，
1、先修改model的生成函数ModelFactory.js。这个函数根据传入的module的定义来生成model，主要生成的有fields属性和proxy。还有一些以后要用到的函数，比如判断此条记录是否能修改、删除等的函数。还有一个是取得本条记录的标志字段的函数。
/**
* 根据module的数据来生成模块的model
*/
Ext.define('app.view.module.factory.ModelFactory', {
statics : {
getModelByModule : function(module) {
var model = Ext.define('app.model.' + module.tf_moduleName, {
extend : 'Ext.data.Model',
module : module,
idProperty : module.tf_primaryKey,
nameFields : module.tf_nameFields,
titleTpl : module.tf_titleTpl,
titleTemplate : null,
fields : this.getFields(module),
proxy : {
type : 'rest',
batchActions : true,
extraParams : {
moduleName : module.tf_moduleName
},
api : {
// 在这里加rest/是因为在web.xml中
// <url-pattern>/rest/*</url-pattern>这一句，spring会根据rest
// 后面的参数去进行匹配
read : 'rest/module/fetchdata.do',
update : 'rest/module/update.do',
create : 'rest/module/create.do',
destroy : 'rest/module/remove.do'
},
actionMethods : {
create : 'POST',
read : 'GET',
update : 'PUT',
destroy : 'DELETE'
},
reader : {
type : 'json',
root : 'records',
totalProperty : 'totalCount'
},
writer : {
type : 'json',
writeRecordId : true,
writeAllFields : false
// 没有修改过的字段不加入到update和delete的json中去
},
listeners : {
exception : function(proxy, response, operation) {
// 将出错信息加到proxy中去，传递到store的sync中显示出错信息，显示后将此属性删除
proxy.errorInfo = Ext.decode(response.responseText, true);
// 如果出错信息解析出错，则加入一个缺省的
if (!proxy.errorInfo)
proxy.errorInfo = {
resultCode : -1,
errorMessage : '未知原因:' + response.responseText
}
}
}
},
getTitleTpl : function() {
if (!this.titleTemplate) {
if (this.titleTpl)
this.titleTemplate = new Ext.Template(this.titleTpl);
else
this.titleTemplate = new Ext.Template('{' + this.nameFields + '}');
}
return this.titleTemplate.apply(this.getData())
},
// 此条记录是否可以修改
canEdit : function() {
if (this.module.tf_hasAuditing && this.get('tf_auditinged'))
return false;
if (this.module.tf_hasApprove && this.get('tf_shNowCount') > 0)
return false;
return true;
},
// 此条记录是否可以进行操作
canOperate : function() {
if (this.module.tf_hasAuditing && this.get('tf_auditinged'))
return false;
return true;
},
// 此条记录是否可以删除
canDelete : function() {
if (this.module.tf_hasAuditing && this.get('tf_auditinged'))
return {
canDelete : false,
message : '【' + this.getTitleTpl() + '】已进行过审核，不允许进行删除操作!'
};
if (this.module.tf_hasApprove && this.get('tf_shNowCount') > 0)
return {
canDelete : false,
message : '【' + this.getTitleTpl() + '】正在审批或已经审批完成,不允许进行删除操作!'
};
return true;
},
// 取得主键值
getIdValue : function() {
return this.get(this.idProperty);
},
// 取得当前记录的名字字段
getNameValue : function() {
if (this.nameFields)
return this.get(this.nameFields);
else
return null;
}
});
return model;
},
// String("String"), Boolean("Boolean"), Integer("Integer"),
// Date("Date"), Double("Double"), Float("Float"); Percent
getFields : function(module) {
var fields = [];
for (var i in module.moduleFields) {
var fd = module.moduleFields[i];
var field = {
name : fd.tf_fieldName,
title : fd.tf_title,
type : this.getTypeByStr(fd.tf_fieldType)
};
if (field.type == 'string') {
field.useNull = true;
field.serialize = this.convertToNull;
}
if (fd.tf_fieldType == 'Date') {
field.dateWriteFormat = 'Y-m-d';
field.dateReadFormat = 'Y-m-d';
}
if (fd.tf_fieldType == 'Datetime')
field.dateReadFormat = 'Y-m-d H:i:s';
field.tf_haveAttachment = fd.tf_haveAttachment;
fields.push(field);
}
return fields;
},
getTypeByStr : function(str) {
console.log(str);
switch (str) {
case 'String' :
return 'string';
case 'Boolean' :
return 'boolean';
case 'Integer' :
return 'int';
case 'Date' :
return 'date';
case 'Datetime' :
return 'date';
case 'Double' :
case 'Float' :
case 'Percent' :
return 'float';
default :
return 'string';
}
},
// 如果是空字符串，返回null
convertToNull : function(v) {
return v ? v : null;
}
}
});
2、在app.store的目录下生成文件GridStore.js。这是grid的Store的类的定义。
Ext.define('app.store.GridStore', {
extend : 'Ext.data.Store',
modulePanel : null,
remoteSort : true,
autoLoad : true,
autoSync : true,
leadingBufferZone : 100,
buffered : false, // buffered=true可以无限下拉，但是删除和新增，reload都有问题，暂时不用
config : {
extraParams : {},
navigates : []
// 导航属性选中的情况
},
constructor : function(param) {
var me = this;
this.pageSize = 20;
this.extraParams = {};
this.navigates = [];
// 有创建时加进来的导航约束
if (param.modulePanel.param) {
var dnv = param.modulePanel.param.defaultNavigateValues;
this.setDefaultNavigates(dnv);
}
// ///////////
this.callParent(arguments);
},
listeners : {
// 调用proxy进行ajax的时候，将参数加进 store.proxy中，在调用完成后，删除掉所有的extraParams参数
// 这样model.proxy就可以多store，互相不干扰了
beforeprefetch : function(store) {
for (var i in store.extraParams)
store.proxy.extraParams[i] = store.extraParams[i];
},
// buffered = true ,执行的是 prefetch
prefetch : function(store, records, successful) {
for (var i in store.extraParams)
delete store.proxy.extraParams[i];
},
// buffered = false ,执行的是 load
beforeload : function(store) {
// console.log(store);
for (var i in store.extraParams)
store.proxy.extraParams[i] = store.extraParams[i];
},
load : function(store) {
for (var i in store.extraParams)
delete store.proxy.extraParams[i];
}
}
});
3、修改app.view.module.Module类，把store 和 model的生成方式都改一下。
initComponent : function() {
console.log(this.moduleName + ' 正在创建');
// 从MainModel中取得当前模块的定义数据，包括字段和各种设置的信息
var mainmodel = this.up('app-main').getViewModel();
this.module = mainmodel.getModuleDefine(this.moduleName);
var viewmodel = new Ext.create('app.view.module.ModuleModel', {
// 将该模块的定义信息传递给本模块的viewModel
module : this.module
});
this.setViewModel(viewmodel);
this.glyph = this.getViewModel().get('tf_glyph'); // 由于上面的glyph的bind无效，因此需要在这里加入glyph的设置
this.model = app.view.module.factory.ModelFactory.getModelByModule(this.module);
this.store = Ext.create('app.store.GridStore', {
module : this.module,
model : this.model,
modulePanel : this
});
this.items = [{
xtype : 'navigate', // 导航区域
region : 'west',4、后台服务器端在com.jfok.server.controller下加入ModuleController.java,这是spring mvc 的控制类。
package com.jfok.server.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.hibernate.exception.ConstraintViolationException;
import org.springframework.dao.DataAccessException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.jfok.server.DAO.SystemBaseDAO;
import com.jfok.server.DAO.module.ModuleDAO;
import com.jfok.server.DAO.module.SqlModuleFilter;
import com.jfok.server.common.ModuleServiceFunction;
import com.jfok.server.hibernate.system._Module;
import com.jfok.server.service.ApplicationService;
import com.jfok.server.service.ModuleService;
import com.jfok.shared.module.DataDeleteResponseInfo;
import com.jfok.shared.module.DataFetchResponseInfo;
import com.jfok.shared.module.DataInsertResponseInfo;
import com.jfok.shared.module.DataUpdateResponseInfo;
@Controller
@RequestMapping(value = "/module")
/**
* 所有模块的的ＣＲＵＤ都是调用这个类的函数来完成的Controller里面完成的
*
* @author jiangfeng
*
*/
public class ModuleController {
@Resource
private SystemBaseDAO systemBaseDAO;
@Resource
private ModuleService moduleService;
@Resource
private ModuleDAO moduleDAO;
private static final Log log = LogFactory.getLog(ModuleController.class);
/**
* 根据前台的请求取得数据
*/
@RequestMapping(value = "/fetchdata.do", method = RequestMethod.GET)
public @ResponseBody
Map<String, Object> fetchData(String moduleName, Integer start, Integer limit, String sort,
String query, String columns, String navigates, String parentFilter,
HttpServletRequest request) {
DataFetchResponseInfo response = moduleService.fetchDataInner(moduleName, start, limit, sort,
query, columns, navigates, parentFilter, (SqlModuleFilter) null, request);
Map<String, Object> result = new HashMap<String, Object>();
result.put("records", response.getMatchingObjects());
result.put("totalCount", response.getTotalRows());
return result;
}
/**
* 新增记录的时候，在后台取得缺省值
*
* @param moduleName
* @param parentFilter
* @param navigates
* @param request
* @return
*/
@RequestMapping(value = "/getnewdefault.do", method = RequestMethod.POST)
public @ResponseBody
Object getRecordNewDefault(String moduleName, String parentFilter, String navigates,
HttpServletRequest request) {
return moduleService.getRecordNewDefault(moduleName, parentFilter, navigates, request);
}
@RequestMapping(value = "/fetchdata.do/{id}", method = RequestMethod.GET)
public @ResponseBody
Object getRecordById(String moduleName, @PathVariable("id") String id, HttpServletRequest request) {
log.debug("根据主键取得模块的一条记录:" + moduleName + "," + id);
Map<String, Object> result = new HashMap<String, Object>();
result.put("totalCount", 1);
List<Object> records = new ArrayList<Object>();
try {
records.add(moduleDAO.getModuleRecord(moduleName, id, request).toString());
} catch (Exception e) {
e.printStackTrace();
}
result.put("records", records);
log.debug("getRecordById返回值：" + result.toString());
return result;
}
/**
* 创建一条记录
*
* @param moduleName
* @param inserted
* @param request
* @return
*/
@RequestMapping(value = "/create.do", method = RequestMethod.POST)
public @ResponseBody
DataInsertResponseInfo addWithNoPrimaryKey(String moduleName, @RequestBody String inserted,
HttpServletRequest request) {
return add(moduleName, inserted, request);
}
@RequestMapping(value = "/create.do/{id}", method = RequestMethod.POST)
public @ResponseBody
DataInsertResponseInfo add(String moduleName, @RequestBody String inserted,
HttpServletRequest request) {
DataInsertResponseInfo result = null;
try {
result = moduleService.add(moduleName, inserted, request);
if (result.getKey() != null) // 如果是空的话，那么就没有保存，错误原因已经在errorMessage里了
result.getRecords().add(
moduleDAO.getModuleRecord(moduleName, result.getKey(), request).toString());
} catch (DataAccessException e) {
e.printStackTrace();
if (result == null)
result = new DataInsertResponseInfo();
result.setResultCode(ModuleService.STATUS_VALIDATION_ERROR);
} catch (Exception e) {
e.printStackTrace();
if (result == null)
result = new DataInsertResponseInfo();
result.getErrorMessage().put("error", e.getMessage());
result.setResultCode(ModuleService.STATUS_FAILURE);
}
return result;
}
/**
* 修改记录
*
* @param moduleName
* @param id
* @param oldid
* @param operType
* @param updated
* @param request
* @return
*/
@RequestMapping(value = "/update.do/{id}", method = RequestMethod.PUT)
public @ResponseBody
DataUpdateResponseInfo update(String moduleName, @PathVariable("id") String id, String oldid,
String operType, @RequestBody String updated, HttpServletRequest request) {
DataUpdateResponseInfo result = null;
_Module module = ApplicationService.getModuleWithName(moduleName);
// 如果主键值修改了，那么先进行主键的修改
if (oldid != null && (!oldid.equals(id))) {
try {
result = moduleService.changeRecordId(moduleName, id, oldid);
} catch (ConstraintViolationException e) {
e.printStackTrace();
result = new DataUpdateResponseInfo();
if (e.getCause().toString().toLowerCase().indexOf("primary key") >= 0)
result.getErrorMessage().put(module.getTf_primaryKey(), "修改过后的主键与原有的主键值重复！");
else
result.getErrorMessage().put(module.getTf_primaryKey(), "当前主键与子模块有约束关系，不可以修改！");
result.setResultCode(ModuleService.STATUS_VALIDATION_ERROR);
}
if (!result.getResultCode().equals(0))
return result;
}
// 修改记录
try {
result = moduleService.update(moduleName, id, operType, updated, request);
result.getRecords().add(moduleDAO.getModuleRecord(moduleName, id, request).toString());
} catch (DataAccessException e) {
result = new DataUpdateResponseInfo();
result.setResultCode(ModuleService.STATUS_VALIDATION_ERROR);
} catch (Exception e) {
e.printStackTrace();
result = new DataUpdateResponseInfo();
result.getErrorMessage().put("error", e.getMessage());
result.setResultCode(ModuleService.STATUS_FAILURE);
}
return result;
}
/**
* 删除记录
*
* @param moduleName
* @param id
* @param request
* @return
*/
@RequestMapping(value = "/remove.do/{id}", method = RequestMethod.DELETE)
public @ResponseBody
DataDeleteResponseInfo remove(String moduleName, @PathVariable String id,
HttpServletRequest request) {
DataDeleteResponseInfo result = null;
try {
result = moduleService.remove(moduleName, id, request);
} catch (DataAccessException e) {
result = new DataDeleteResponseInfo();
String errormessage = ModuleServiceFunction.addPK_ConstraintMessage(e, moduleName);
result.setResultMessage(-1, errormessage != null ? errormessage
: "请检查与本记录相关联的其他数据是否全部清空！<br/>");
} catch (Exception e) {
result = new DataDeleteResponseInfo();
result.setResultMessage(-1, e.getMessage());
}
return result;
}
@RequestMapping(value = "/removerecords.do")
public @ResponseBody
DataDeleteResponseInfo removeRecords(String moduleName, String ids, String titles,
HttpServletRequest request) {
DataDeleteResponseInfo result = null;
String[] idarray = ids.split(",");
String[] titlearray = titles.split("~~");
result = new DataDeleteResponseInfo();
for (int i = 0; i < idarray.length; i++) {
try {
DataDeleteResponseInfo recordDeleteResult = moduleService.remove(moduleName, idarray[i],
request);
if (recordDeleteResult.getResultCode() == 0)
result.getOkMessageList().add(titlearray[i]);
else {
if (recordDeleteResult.getErrorMessageList().size() > 0)
result.getErrorMessageList().add(
"【" + titlearray[i] + "】" + recordDeleteResult.getErrorMessageList().get(0));
else
result.getErrorMessageList().add("【" + titlearray[i] + "】" + "未知错误！");
}
} catch (DataAccessException e) {
String errormessage = ModuleServiceFunction.addPK_ConstraintMessage(e, moduleName);
result.getErrorMessageList().add(
"【" + titlearray[i] + "】" + (errormessage != null ? errormessage : "关联的数据未清空！"));
} catch (Exception e) {
result.getErrorMessageList().add("【" + titlearray[i] + "】" + e.getMessage());
}
}
result.setResultCode(result.getErrorMessageList().size());
return result;
}
}
5、在service包中加入ModuleService.java，用来完成查询，新增，删除，修改的功能。
6、加入ModuleDAO.java ,用来根据模块名称，起始行，终止行，筛选条件等来从数据库中取得数据。这些类太多了，就不一一写明了。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
