extjs MVC经验小结。

最新推荐文章于 2021-02-15 20:19:19 发布

suyu_yuan

最新推荐文章于 2021-02-15 20:19:19 发布

阅读量425

点赞数

分类专栏： ExtJS

本文链接：https://blog.csdn.net/suyu_yuan/article/details/52945975

版权

ExtJS 专栏收录该内容

33 篇文章 3 订阅

订阅专栏

1、view层有如下组件：

Ext.define('cdkj.view.correct.end.CorrectionEndSearchView', {// 查询条件
extend : 'Ext.form.Panel',
alias : 'widget.correctionEndSearchView',
border : 0,
width : 400,
layout : "hbox",
items : [
{
xtype : 'cycle',
showText : true,
cls : 'sf-search-cycle-btn',
menu : {
id : 'staffview-type-menu',
items : [ {
text : '查询全部',
placeholderText : '姓名/身份证号/手机号码',
id : 'searchText',
checked : true
}, {
text : '姓名',
placeholderText : '按姓名查询',
id : 'xm'
}, {
text : '身份证号',
placeholderText : '按身份证号查询',
id : 'zjhm'
}, {
text : '手机号码',
placeholderText : '按手机号码查询',
id : 'mobilePhone'
} ]
},
changeHandler : function(cycleBtn, activeItem) {
this.nextSibling().name = activeItem.id;
this.nextSibling().emptyText = activeItem.placeholderText;
this.nextSibling().applyEmptyText()
},
margins : '0 -5 0 0 '
},
{
xtype : 'textfield',
margins : '0 5 0 0',
width : 180,
name : 'searchText',
id : 'correctEndSearchText',
emptyText : '姓名/身份证号/手机号码',
checkValue : function() {
var value = this.getValue();
if (!Ext.isEmpty(value)) {
}
return this.name + value;
}
},
{
xtype : 'button',
text : '搜索',
margin : '0 5 0 0',
action : 'search',
cls : 'btn-primary',

}
]
});

2、view层传值到controller，这里的方法入参String searchText 从view层页面中的name为searchText的组件中获取值（这里是extjs MVC自动完成的），注意这里不需要给searchText配置model属性。

配置model对应的值适用于从数据库持久层中获取的数据封装到java对象中，再解析java对象转化到到页面时需要配置model ，这样利用model把java对象的属性转化成页面可以读取的值。而mybatis的resultMap配置是把数据库字段抓换成java对象的属性的作用。

@ResponseBody
@RequestMapping(value = "/CorrectionEndList", method = RequestMethod.POST)
public PageReturnUtils<Object> selectList(CorrectionEndVO vo,String searchText, int limit,
int page) {
// System.out.println(2211);

// 初始化page, 设置分页参数 true：分页查询时统计总数，false：分页查询时不统计总数
Page<Object> p = PageHelper.startPage(page, limit, true);
if(searchText != null){
vo.setSearchText(searchText);
}
// 设置当前部门，测试
if (vo.getDeptPk() == null || vo.getDeptPk() < 1) {
vo.setDeptPk(772);
}
getSession().getAttribute(Constants.CURRENT_USER);
getBaseService().getPageList(vo,"com.cdkj.correct.domain.CorrectionEnd.CorrectEnd_ListVO");

// 返回JSON数据
return new PageReturnUtils<Object>(p);
}

3、持久层读取java对象作为入参，如：

<where>
<trim prefixOverrides="and">
t.DR=0 and a.DR=0 and t.VSTATUS>=1

<if test="searchText != null and searchText != ''">
and (t.XM like '%${searchText}%' or t.ZJHM = #{searchText} or
t.MOBILE_PHONE = #{searchText})
</if>
<if test="xm != null and xm != ''">and t.XM like '%${xm}%'</if>

<if test="zjhm != null and zjhm != ''">and t.ZJHM = #{zjhm} </if>

<if test="mobilePhone != null and mobilePhone != ''">and t.MOBILE_PHONE = #{mobilePhone} </if>
</trim>
</where>
order by a.pk_id asc
</select>

这里的searchText，xm，zjhm，mobilePhone都是java持久化类对象的属性名，其中searchText没有对应的数据库字段，这个属性只是用来传递参数。

///

再如：ListController.js

/**
* 【搜索】按钮
*/
searchArchive : function(btn) {
var form = btn.up("form");
var params = {};
var searchField = form.down("textfield");
var archiveStore = this.getCorrectArchiveListPanel().store;
switch(searchField.getName()){
case "all":
archiveStore.getProxy().setExtraParam("paramAll", searchField.getValue());
break;
case "xm":
archiveStore.getProxy().setExtraParam("xm", searchField.getValue());
break;
case "zjhm":
archiveStore.getProxy().setExtraParam("zjhm", searchField.getValue());
break;
case "phone":
archiveStore.getProxy().setExtraParam("mobilePhone", searchField.getValue());
break;
default:
archiveStore.getProxy().setExtraParam("all", searchField.getValue());
}

var grid = this.getCorrectArchiveListPanel();
//移到第一页
grid.down("pagingtoolbar").moveFirst();
}

这里的archiveStore.getProxy().setExtraParam("paramAll", searchField.getValue());的作用是设置参数paramAll和它的值，传递到该model对应的java类，

并自动按照属性名进行封装到对应的实体类对象中，contronller如下：

@ResponseBody
@RequestMapping(value = "/archiveList", method = RequestMethod.POST)
public PageReturnUtils<Object> selectList(CorrectArchive vo, String all, String isAdult,
int limit, int page) {

log.debug("all:" + vo.getParamAll());
log.debug("xm:" + vo.getXm());
log.debug("mobilePhone" + vo.getMobilePhone());

log.debug("zjhm:" + vo.getZjhm());

}

在控制台中可以查看对应的属性值。