根据输入自动匹配搜索展示的 combo实例

根据输入自动匹配搜索展示的 combo实例。

MemberEditGrid = Ext.extend(Ext.grid.Panel, {
	_proId:0,
	constructor : function(_config) {
		if (_config == null)
			_config = {};
		Ext.apply(this, _config);
		this.canFlag = false;
		this.monCorr = true;
		this.fzrId = null;
		this.jhyId = null;
//		if( this._tab._topPanel._grid.getSelectionModel().selected.length > 0)
//			this._proId = this._tab._topPanel._grid.getSelectionModel().selected.items[0].get('guId');
		this['rowEditing'] = Ext.create('Ext.grid.plugin.RowEditing', {
	        clicksToMoveEditor: 1,
	        autoCancel: false
	    });
		 this._baseParam = {  
				        process : this._process,  
				       
				        start : 1  
				    };
					 if(this._winProId)
						this._baseParam.proId = this._winProId;

		this["store"] = {
			autoLoad : true,
			proxy : {
				type : 'ajax',
				url : "xmgk/xm-member-manage.action",
				extraParams : this._baseParam, 
				reader : {
					type : 'json',
					root : 'rows',
					totalProperty : "totalCount"
				}
			},
			model : 'XmMember',
			listeners : {
				'load' : {
					fn : this.loadHander,
					scope : this
				}
			}
		};

		this['columns'] = [
			{
				header : "角色",
				dataIndex : "ryxz"
//			 	editor: {
//	               // allowBlank: false
//	            }
			},
			{
			text : '姓名',
			flex : 1,
			dataIndex : 'name',
            editor: {
				xtype:'combo',
				queryMode : 'remote',
				columnWidth : .33,
				typeAhead:true,
				labelAlign : 'right',
				fzrId:this.fzrId,
				jhyId:this.jhyId,
	//			multiSelect:true,
				anchor : '95%',
				triggerAction : "all", // 显示所有数据
				displayField : "userName", // 要显示的值
				valueField : "userName",// 要隐藏实际的值
				queryParam : 'name',
			forceSelection : true,
			hideTrigger : true,
			resizable : false,
			editable : true,
			queryDelay : 500,
			enableKeyEvents : true,
			minChars : 1,
				listConfig : {
					loadingText : '正在加载中...'
				},
				store : new Ext.data.Store( {
					autoLoad : true,
					proxy : {
						type : 'ajax',
						url : 'sys/user-info-manage!getComboUserName.action',
						extraParams:{
								//	orgGuId : currUser.get('orgGuId')
					
										}
					},
					model : 'UserInfo'
				}),
//		listeners : {
//			'blur' : {
//				fn : this.changeHandler,
//				scope : this
//			}
//		},
                allowBlank: false
              //  ,
//                listeners : {
//					'blur' : {
//						fn : function(_field,_a,_b){
//							
//							ajaxRequest( {
//								url : 'sys/user-info-manage!checkUserName.action',
//								params : {
//									name : _field.value
//								},
//							callBack : function(returnData) {
//								if(returnData.data=='error'){
//									warningMesg({
//										msg :'无此用户，请确认！'
//									});
//								//	_field.focus(false,100);
//									return false;
//								}else
//									return true;
//							}
//							});
//						},
//						scope : this
//					}
//				}
            }
		},  {
			text : '单位',
			flex : 1,
		
			dataIndex : 'danwei',
            editor: {
	            //    allowBlank: false
			
            }
			}, {
				text : '性别',
				flex : 1,
				//id : 'sex',
				dataIndex : 'sex',
	
	            editor: {
					// allowBlank: false
	            }
			}, {
				text : '出生年月',
				flex : 1,
				xtype : 'datecolumn',
				format : 'Y-m',
				dataIndex : 'csny',
	            editor: {
					xtype: 'datefield',
		            format: 'Y-m'
	             //   allowBlank: false
	            }
			}, {
				text : '技术职称',
				flex : 2,
				dataIndex : 'jszc',
	            editor: {}
			} ,{
				text : '专业',
				flex : 1,
				dataIndex : 'zy',
	            editor: {
				//	 allowBlank: false
	            }
			}, {
				text : '承担的主要工作',
				flex : 2,
				dataIndex : 'cddzygz',
	            editor: {}
			}  ,{
				text : '投入月数',
				flex : 1,
				dataIndex : 'trys',
	            editor: {
				//	 allowBlank: false
	            }
		}]
		MemberEditGrid.superclass.constructor.call(this, {
			height : 210,
			width :window.screen.width * 0.8,
			autoScroll : true,
			//id:'memb',
			plugins: [this.rowEditing],
			tbar : [ {
				text : "增加人员",
				iconCls : "tbnt_addrow",
				handler : this.onAddRow,
				scope : this
			}, "-", {
				text : "删除人员",
				iconCls : "tbnt_del",
				handler : this.onDelRow,
				scope : this
			},"-", {
				text : "保存",
				iconCls : "tbnt_save",
				handler : this.onSave,
				scope : this
			}],
			viewConfig : {
				stripeRows : true,
				enableTextSelection : true
			}
		


		});
		
	},
	loadHander : function(_load,_datas){
		
		
		if(this._period> this.store.totalCount){
			var _size = this._period -this.store.totalCount;
			for(var i=0;i<_size;i++)
				this.store.add(new XmMember());
		}
		 var _index = this.store.getCount();
		 if(_index == 0)
		 {
		 	 var _ps = new XmMember();
			 _ps.data.ryxz = '项目经理';
			  _ps.data.orders = 0;
			  this.store.insert(0,_ps);
			  _ps = new XmMember();
			 _ps.data.ryxz = '项目计划员';
			  _ps.data.orders = 1;
			  this.store.insert(1,_ps);
		 }
	},
	onAddRow : function(){
        var _ps = new XmMember();
        var _index = this.store.getCount();
        if(_index == 0)
    	{
    		_ps.data.ryxz = '项目经理';
    		_ps.data.orders = 0;
    		
    	}
        else if(_index == 1)
    	{
    		_ps.data.ryxz = '项目计划员';
    		_ps.data.orders = 1;
    	}
        else 
    	{
    		_ps.data.ryxz = '项目成员';
    		_ps.data.orders = _index;
    	}
        this.store.insert(_index,_ps);
       
	},
	onSave : function(){
		var guId = this._winProId;
		
       var _res= this.store.data.items;
       var _data = '';
       Ext.each(_res,function(_item,_index,_allItems){
			if(_item.get("name").length>0){
				if(_data.length==0){
					_data+='[';
				}
				if(_data.length>1)
					_data+=',';
				_data+= Ext.encode(_item.data);
				//_count++;
			}
			else
			{
				alert('必须填写姓名!');
				return;
			}
		});
       	if(_data.length>0)
			_data+=']';
		else{
			warningMesg({
				msg : '请录入人员信息！'
			});
			return;
		}
       	var _grid = this;
       ajaxRequest( {
					url : 'xmgk/xm-member-manage!save.action',
					params : {
    	   				proId:guId,
						data : _data
					},
					callBack : function(returnData) {
						_grid.store.loadPage(1);
					}
				});
		
	},
	changeHandler : function(_combo,_record,_op)
	{
			var guId = _combo.lastSelection[0].data.guId;
			if(_combo.ownerCt.items.items[0].value == '项目经理')
			{
				_combo.fzrId = guId;
			}
			if(_combo.ownerCt.items.items[0].value == '项目计划员')
			{
				_combo.jhyId = guId;
			}
//			var combo;
//			alert();
			console.log(_combo.jhyId);
			console.log(_combo.jhyId);
	},
	onDelRow : function(){
		var _selRow = this.getSelectionModel().selected.items[0];
		var _grid = this;
		if(_selRow==null){
			warningMesg({msg : '请选择人员！'});
			return ;
		}
		var _names  = getGridValues(this,'ryxz');
		if(_names.indexOf('项目经理')!= -1 || _names.indexOf('项目计划员')!= -1)
		{
			warningMesg({msg : '只能删除项目成员！'});
			return ;
		}
		var _guIds  = getGridValues(this,'guId');
		askMesg({
			msg : '确定删除该人员信息?',
			fn : function(){
			if(_selRow.get('guId')>0){
				ajaxRequest( {
					url : 'xmgk/xm-member-manage!delete.action',
					params : {
						guIds : _guIds
					},
					callBack : function(returnData) {
										_grid.store.remove(_selRow);

					}
				});
			}else
				_grid.store.remove(_selRow);
			}
		});
	}
});

后台代码 就是根据 name 进行like匹配搜索即可，此处省略。