Ext.grid.EditorGridPanel单元格内套用下拉列表，且列表数据为动态加载，支持模糊查询，有描述信息

function familyMemberStore(familyId){
var familyMemberResultGridStore = new Ext.data.JsonStore({
remoteSort : true,
proxy : new Ext.data.HttpProxy({
url : '获取后台数据',
method : 'POST',
defaultHeaders : {Accept : 'application/json'}
}),
fields : ['id','ehrId','personName', 'ehrCode', 'hhRelationship', 'ehrHProblemString', 'mngOrgName','gender'],
listeners : {
remove : function(s, r, i){
var deletedId = r.get('id');
if(deletedId){
if(s.deletedIds){
s.deletedIds += ',' + deletedId;
}else{
s.deletedIds = deletedId;
}
}
},
load:function(){
familyImage();
}
}
})

var hhRelationshipStore = new Ext.data.JsonStore({
fields: ['name', 'value'],
data : [{name : '户主本人', value : '1'},
{name : '祖父母', value : '2'},
{name : '父母', value : '3'},
{name : '夫妻', value : '4'},
{name : '兄弟姐妹', value : '5'},
{name : '子女', value : '6'},
{name : '孙子女', value : '7'},
{name : '其它', value : '8'}]
});

var hhRelationshipCombo = new Ext.form.ComboBox({
store: hhRelationshipStore,
valueField : 'value',
displayField:'name',
mode: 'local',
forceSelection: true,
editable : false,
triggerAction: 'all',
selectOnFocus:true
});

var code = user.orgCode;
//加载家庭成员数据
var hhRelationship = new Ext.data.JsonStore({
remoteSort : true,
proxy : new Ext.data.HttpProxy({
url : baseUrl + "/app/ehr",
method : 'POST',
defaultHeaders : {Accept : 'application/json'}
}),
baseParams:{
search_orgComboCode : code
},
totalProperty : 'totalElements',
root : 'content',
fields : ['id', 'ehrCode','familyId','familyName','hhRelationship' ,'ehrHProblemString', 'mngOrgName','personName', 'gender', 'birthDate', 'innerCode', 
'grHealth', 'cdHypertension', 'fdsServiceItems', 'idNumber', 'homeTel', 'integrity' , 'grHealth'
, 'grHighRisk' , 'grChronicDisease' , 'grChildren' , 'grHandicapped' , 'grMaternity' , 'grMentalDisorder' , 'grOld'
, 'cdHypertension' , 'cdDiabetesMellitus' , 'cdCoronaryDisease' , 'cdCerebralApoplexy' , 'cdOther' ]
});

var ehrQueryResultGridStore = new Ext.data.JsonStore({
remoteSort : true,
proxy : new Ext.data.HttpProxy({
url : baseUrl + "/app/ehr",
method : 'POST',
defaultHeaders : {Accept : 'application/json'}
}),
baseParams:{
search_orgComboCode : code
},
totalProperty : 'totalElements',
root : 'content',
fields : ['id', 'ehrCode','familyId','familyName','hhRelationship' ,'ehrHProblemString', 'mngOrgName','personName', 'gender', 'birthDate', 'innerCode', 
'grHealth', 'cdHypertension', 'fdsServiceItems', 'idNumber', 'homeTel', 'integrity' , 'grHealth'
, 'grHighRisk' , 'grChronicDisease' , 'grChildren' , 'grHandicapped' , 'grMaternity' , 'grMentalDisorder' , 'grOld'
, 'cdHypertension' , 'cdDiabetesMellitus' , 'cdCoronaryDisease' , 'cdCerebralApoplexy' , 'cdOther' ]
});
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">',
'<div>',
'成员姓名：{personName}',
'</div>',
'<div>',
'性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：<tpl if="gender==1">男</tpl><tpl if="gender==2">女</tpl>',
'</div>',
'<div>',
'所属家庭：<tpl if="familyName==null">无</tpl><tpl if="familyName!=null">{familyName}</tpl>',
'</div>',
'<div>',
'出生日期：{birthDate}',
'</div>',
'<div>',
'证件号码：{idNumber}',
'</div>',
'</div>',
'</tpl>'
);

var personNameCombo = new Ext.form.ComboBox({
listWidth : 256,
queryParam : "search_name" ,
minChars : 1,
pageSize : 15,
forceSelection : true,
displayField : "personName",
valueField : "personName",
triggerAction : "all",
tpl:tpl,
store : ehrQueryResultGridStore,
listeners : {
select : function(c, r){
var selectedRecord = Ext.getCmp('familyMemberResultGrid').getSelectionModel().getSelected();
selectedRecord.set('personName', r.get('personName'));
selectedRecord.set('ehrCode', r.get('ehrCode'));
selectedRecord.set('hhRelationship', r.get('hhRelationship'));
selectedRecord.set('ehrHProblemString', r.get('ehrHProblemString'));
selectedRecord.set('mngOrgName', r.get('mngOrgName'));
selectedRecord.set('id', r.get('id'));
selectedRecord.set('familyId', r.get('familyId'));
selectedRecord.set('gender', r.get('gender'));
},
beforequery : function(queryEvent){
queryEvent.query = queryEvent.query+"%";
}
}
})


new Ext.grid.EditorGridPanel({
id : 'familyMemberResultGrid',
renderTo : 'familyPersonals',
store :  familyMemberResultGridStore,
loadMask : true,
stripeRows : true,
height : 180,
width:850,
enableHdMenu : false,
viewConfig: {
forceFit : true
},
sm : new Ext.grid.RowSelectionModel({singleSelect:true}),
columns: [
{header : '姓名',dataIndex : 'personName', editor: personNameCombo, renderer: function(value, cellmeta, record) {
if(record.get('personName')){
return  "<span style='cursor:pointer;'>" + record.get('personName') + "</span>";
}
var index = ehrQueryResultGridStore.find(personNameCombo.valueField,value);
var ehrRecord = ehrQueryResultGridStore.getAt(index);
var returnvalue = "";
if (ehrRecord) {
returnvalue = ehrRecord.get('personName') + ehrRecord.get('gender') + ehrRecord.get('idNumber');
}
return "<span style='cursor:pointer;'>" + returnvalue + "</span>";
}
},
{header : '健康档案编号',dataIndex : 'ehrCode'},
{header : '与户主关系',dataIndex : 'hhRelationship', editor:hhRelationshipCombo,renderer:function(value, cellmeta, record){
var index = hhRelationshipStore.find(hhRelationshipCombo.valueField,value);
var ehrRecord = hhRelationshipStore.getAt(index);
var returnvalue = "";
if (ehrRecord) {
returnvalue = ehrRecord.get('name');
}
return returnvalue;
}
},
{header : '主要健康问题',dataIndex : 'ehrHProblemString'},
{header : '档案存放地',dataIndex : 'mngOrgName'},
{header : '',dataIndex : 'operation', 
renderer : function (){
return "<img src='"+baseUrl+"/static/styles/images/icons/del.png'οnclick='deletePersonal()'> <img src='"+baseUrl+"/static/styles/images/top/pople.png'οnclick='toEhrForm()'>";
}
}
],
listeners : {
beforeedit:function(e){
var record = e.record;
var updateId = record.get('id');
var store = Ext.getCmp('familyMemberResultGrid').getStore();
if(updateId){
if(store.deletedIds){
store.deletedIds += ',' + updateId;
}else{
store.deletedIds = updateId;
}
}
}


}
});

}