【EXTJS】grid中的combo选定后显示value的解决方案

由于楼主使用的是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);
			}
		})
		
    },





});