由于楼主使用的是Extjs 5.1.0 所以我会在MVVM模式的基础上解决这个问题。
大家在看的时候注意用【】标起来的注释
首先,先定义一个grid类
Ext.define('cmclouds.view.rdproject.ratio.Ratio', {
extend : 'Ext.grid.Panel',
requires : [
'cmclouds.view.rdproject.ratio.RatioController',
'cmclouds.view.rdproject.ratio.RatioModel',
'Ext.grid.*',
],
xtype : 'app-ratio',
alias : 'widget.ratio',
controller : 'ratio',
id : 'ratioGrid',
viewModel : {
type : 'ratio'
},
autoWidth : true,
autoScroll : true,
stripeRows : true,
viewConfig : {
forceFit : true
},
plugins: {ptype: 'cellediting', clicksToEdit: 1},
columns:[
{text:'姓名',dataIndex:'staff_name',flex:1},
{text:'身份证',dataIndex:'idno',flex:2},
{text:'人员类型',dataIndex:'rdstafftype',flex:1,
editor:{
xtype:'combo',
allowBlank:false,
name:'rdstafftype_code',
displayField:'rdstafftype', //【1】 注意:由于editor是每一行都会渲染的,所以不适合给id,
valueField: "rdstafftype", // 也就没办法通过Ext.getCmp('').getStore()的方式获取他的store
queryMode: "local", // 所以,我并没有在初始化配置里就给定一个store
emptyText:'请选择', // 而是选定在渲染时再设置
editable:false, //【2】 我把displayField和valueField都设置成了想要显示的内容,这俩配置同步
listeners:{
render:'setStaffTypeStore',
}
}
},
{text:'担任职务',dataIndex:'rdrole',flex:1,
editor:{
xtype:'combo',
allowBlank:false,
name:'rdrole_code',
displayField:'rdrole',
valueField: "rdrole",
queryMode: "local",
emptyText:'请选择',
editable:false,
listeners:{
render:'setRoleStore',
}
}
}
],
selModel:{
type:'checkboxmodel',
checkOnly:true,
//---Extjs 5.1.0 bug:deselect方法失效 该bug 在5.1.2修复,在5.1.0种,我们作以下两个配置可以使 deselect 生效
mode:'SIMPLE',
enableKeyNav:true,
listeners:{
select:'onChecking',
deselect:'onUnChecking'
}
},
initComponent:function(){
var me = this;
var store = Ext.create('cmclouds.store.RatioStore');
var departStore = Ext.create('cmclouds.store.DepartStore');
var employTypeStore = Ext.create('cmclouds.store.EmployTypeStore');
//下面的写法保证了grid和pagingtoolbar是一个实例
this.store = store;
store.addListener('load',function(){
var index = -1;
for(var i=0;i<store.getCount();i++){
var record = store.getAt(i);
if(record.data.rdproj_id != null){//根据后台数据判断那些记录默认选中
index++;
}else{break;}
}
var sm = me.getSelectionModel();
//执行选中记录
if(index > -1){sm.selectRange(0,index);}
});
me.dockedItems=[{
xtype:'toolbar',
dock:'top',
items:[
{
xtype:'combo',
fieldLabel:'部门',
labelWidth:40,
width:160,
id:'ratio_filter_depart',
allowBlank:false,
name:'depart_code',
store: departStore,
displayField:'depart',
valueField: "depart_code",
queryMode: "local",
emptyText:'请选择',
editable:false,
value:'all',
listeners:{
select:function(combo){
filterRatioStore();
}
}
},'-',
{
xtype:'combo',
fieldLabel:'聘用方式',
labelWidth:70,
width:200,
id:'ratio_filter_employtype',
allowBlank:false,
name:'employtype_code',
store: employTypeStore,
displayField:'employtype',
valueField: "employtype_code",
queryMode: "local",
emptyText:'请选择',
editable:false,
value:'all',
listeners:{
select:function(combo){
filterRatioStore();
}
}
},'-',
{
width: 160,
fieldLabel: '姓名',
labelWidth: 40,
id:'ratio_filter_name',
xtype: 'textfield',
listeners:{
change:function(textfield){
filterRatioStore();
}
}
},'->',
{
xtype:'button',
text:'刷新',
iconCls:' icon-spinner',
handler:'refreshRatioStore'
},{
xtype:'button',
text:'保存分配方案',
iconCls:'icon-save',
handler:'saveTheDistribution'
}
]
}];
//【3】在initComponent方法中新建了 Combo需要的store对象
var rDRoleStore = Ext.create('cmclouds.store.RDRoleStore');
var model = me.getViewModel();
rDRoleStore.load({
params:{bo_for_show:0},
callback: function(records, operation, success){
model.set('rdrolerecords',records);//【4】将store里的record绑定到model中
}
});
model.set('rdrolestore',rDRoleStore); //【5】通过MVVM的数据绑定,将store绑定到model中
var rDStaffTypeStore = Ext.create('cmclouds.store.RDStaffTypeStore');
var model = me.getViewModel();
rDStaffTypeStore.load({
params:{bo_for_show:0},
callback: function(records, operation, success){
model.set('rdstafftyperecords',records);
}
});
model.set('rdstafftypestore',rDStaffTypeStore);
me.callParent();
}
});
其次定义 grid的Controller类
Ext.define('cmclouds.view.rdproject.ratio.RatioController', {
extend: 'Ext.app.ViewController',
requires: [
'Ext.window.MessageBox'
],
alias: 'controller.ratio',
/**
* 加载RatioStore
*/
loadRatioStore:function(){
loadRatioStore();
},
/**
* 刷新RatioStore
*/
refreshRatioStore:function(){
refreshRatioStore();
},
/**
* 设置员工类型store
* @param combo
*/
setStaffTypeStore:function(combo){
var model = Ext.getCmp('ratioGrid').getViewModel();
var rdstaffs = model.get('rdstafftypestore');
combo.setStore(rdstaffs);//【6】在渲染combo时,给combo设置上store,只要鼠标点到那一列时,才会开始渲染
},
/**
* 设置担任职务store
* @param combo
*/
setRoleStore:function(combo){
var model = Ext.getCmp('ratioGrid').getViewModel();
var rdroles = model.get('rdrolestore');
combo.setStore(rdroles);
},
/**
* 保存分配方案
*/
saveTheDistribution:function(){
var record = Ext.getCmp('ratioGrid').getSelectionModel().getSelected().items;
var model = Ext.getCmp('ratioGrid').getViewModel();
var begin = parseInt(model.get('begin'));
var end = parseInt(model.get('end'));
//【7】从model中取出combo的record,如果发现当前grid的record中rdstafftype和combo的的record里的rdstafftype相同
// 那么就把combo的record里的rdstafftype_code设置进grid的record中,这样就可以拿着grid的record去后台做请求了
var rdstaffs = model.get('rdstafftyperecords');
for ( var i in rdstaffs) {
var rdstafftype = rdstaffs[i].data.rdstafftype;
for ( var j in record) {
var rdstafftype2 = record[j].data.rdstafftype;
if(rdstafftype == rdstafftype2){
record[j].set('rdstafftype_code',rdstaffs[i].data.rdstafftype_code);
}
}
}
var rdroles = model.get('rdrolerecords');
for ( var i in rdroles) {
var rdrole = rdroles[i].data.rdrole;
for ( var j in record) {
var rdrole2 = record[j].data.rdrole;
if(rdrole == rdrole2){
record[j].set('rdrole_code',rdroles[i].data.rdrole_code);
}
}
}
var recList = new Array();
var recList2 = new Array();
for ( var i in record) {
for ( var j = begin; j <= end; j++) {
var m = j.toString();
if(null != record[i].data[m]){
var parMap = new Map();
parMap.rdproj_id = model.get('rdproj_id');
parMap.staff_id = record[i].data.staff_id;
parMap.yearmon = m;
parMap.ratio = record[i].data[m];
recList.push(JSON.stringify(parMap));
}
}
var parMap2 = new Map();
parMap2.rdproj_id = model.get('rdproj_id');
parMap2.staff_id = record[i].data.staff_id;
parMap2.rdrole_code = record[i].data.rdrole_code;
parMap2.rdstafftype_code = record[i].data.rdstafftype_code;
recList2.push(JSON.stringify(parMap2));
}
Ext.Ajax.request({
url:getRootPath()+'/business/saveTheDistribution',
params:{
recList:"["+recList+"]",
recList2:"["+recList2+"]",
rDProjId:model.get('rdproj_id')
},
success : function(response, opts){
var jsonResult = Ext.JSON.decode(response.responseText);
refreshRatioStore();
Ext.Msg.alert('提示', jsonResult.errmsg);
},
failure:function(response, opts){
var jsonResult = Ext.JSON.decode(response.responseText);
Ext.Msg.alert('提示', jsonResult.errmsg);
}
})
},
});