！[我正在使用extjs 4。并使用RowEditing插件，添加了多选组合框，组合框显示的是键而不是值，但是当我选择任何行时它会显示值，之后当我对任何gievn行中的数据进行一些更改时，然后值开始显示。
当未选择行时，我也看不到复选框，并在选中该复选框时显示复选框。
代码
模型是：
Ext.define('Employee', {
extend: 'Ext.data.Model',
idProperty:'employeeId',
fields: [
{name: 'alertType', type: 'string'},
{name: 'statusCode', type: 'bool'},
{name: 'employeeId', type: 'string'},
{name: 'employeeName', type: 'string'},
{name: 'jobCode', type: 'string'},
{name: 'jobTitle', type: 'string'},
{name: 'jobTarget', type: 'string'},
{name: 'vpPlan', type: 'string'},
{name: 'losPlanName', type: 'string', convert:function(v, record){if(typeof v =="string") return v.split(","); else return v; }},
{name: 'losPlanCodes', type: 'float[]', convert:function(v, record){if(typeof v =="string") return v.split(","); else return v; }},
{name: 'losLocation', type: 'string', convert:function(v, record){if(typeof v =="string") return v.split(","); else return v; }},
{name: 'losLocationCodes', type: 'float[]', convert:function(v, record){if(typeof v =="string") return v.split(","); else return v; }},
{name: 'entity', type: 'string'},
{name: 'locationCode', type: 'string'},
{name: 'deptId', type: 'string'},
{name: 'deptName', type: 'string'},
]
}）;
网格商店： -
var directReportiesStore = Ext.create('Ext.data.Store', {
autoDestroy: true,
autoLoad:true,
autoSync: true,
allowSingle: true,
storeId: 'directReportiesStore',
model: 'Employee',
sorters: [{
property: 'employeeName',
direction:'ASC'
}],
proxy: {
type: 'ajax',
url: 'getDirectReportiesJson.do?plannerId='+plannerId,
api: {
update: 'getDirectReportiesJson.do?plannerId='+plannerId,
},
reader: {
type: 'json',
successProperty: 'success',
idProperty: 'employeeId',
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: false
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
listeners: {
write: function(proxy, operation){
Ext.example.msg(operation.action, operation.resultSet.message);
}
},
listeners: {
load: function(store,records){
for(var rec=0; rec< records.length; rec++){
for(var i=0; i< Ext.getCmp('employeeGrid').columns.length; i++){
if(Ext.getCmp('employeeGrid').columns[i].getId() =='losLocationCodes'){
alert(Ext.getCmp('employeeGrid').columns[i].getId())
Ext.getCmp('employeeGrid').columns[i].getEditor().setValue(records[rec].get('losLocationCodes'))
alert(records[rec].get('losLocationCodes'));
}
}
}
}
}
});
！[] [1]
组合盒商店：
// create the Plan Store
var planStore = Ext.create('Ext.data.Store', {
autoDestroy: true,
storeId: 'planStore',
idIndex: 0,
fields: [
{name: 'planId', type: 'float'},
{name: 'planName', type: 'string'},
{name: 'planTypeName', type: 'string'},
]
});
planStore.loadData(plansJson);
// create the Location Store
var locationStore = Ext.create('Ext.data.Store', {
autoDestroy: true,
storeId: 'locationStore',
idIndex: 0,
fields: [
{name: 'locAreaId', type: 'float'},
{name: 'locAreaName', type: 'string'},
{name: 'active', type: 'string'},
{name: 'inclRegAvg', type: 'string'},
]
});
locationStore.loadData(locationJson);
使用所有三家商店的GRID ......
var grid = Ext.create('Ext.grid.Panel', {
store: directReportiesStore,
id:'employeeGrid',
title: 'Employee Varieable Pay Mapping',
width: 1100,
height: 400,
frame: true,
columns: [{
id: 'alertType',
header: 'Alert',
width: 30,
dataIndex: 'alertType',
editor: {
disabled: true
}
} , {
id: 'statusCode',
header: 'Reviewed?',
dataIndex: 'statusCode',
width: 40,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
} , {
id: 'employeeId',
header: 'Employee Id',
dataIndex: 'employeeId',
width: 50,
editor: {
disabled: true
}
} ,{
id: 'employeeName',
header: 'Employee Name',
dataIndex: 'employeeName',
flex: 1,
editor: {
disabled: true
}
} ,{
id: 'jobCode',
header: 'Job Code',
dataIndex: 'jobCode',
width: 40,
editor: {
disabled: true
}
} ,{
id: 'jobTitle',
header: 'Job Title',
dataIndex: 'jobTitle',
flex: 1,
editor: {
disabled: true
}
} ,{
id: 'jobTarget',
header: 'Job Target',
dataIndex: 'jobTarget',
width: 40,
editor: {
disabled: true
}
} , {
id:'vpPlan',
header: 'VP Plan',
dataIndex: 'vpPlan',
width: 70,
editor: {
xtype: 'combobox',
typeAhead: true,
editable: false,
triggerAction: 'all',
selectOnTab: true,
store: [
['SCAL','SCAL'],
['Shared Svc','Shared Svc'],
],
lazyRender: true,
listClass: 'x-combo-list-small'
}
}, {
id:'losPlanCodes',
header: 'LOS Plan Name',
dataIndex: 'losPlanCodes',
width: 250,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
tooltip: 'losPlanName',
selectOnTab: true,
store: planStore,
queryMode: 'local',
lazyRender: true,
multiSelect: true,
displayField: 'planName',
valueField:'planId'
}
}, {
id:'losLocationCodes',
header: 'LOS Location',
dataIndex: 'losLocationCodes',
width: 90,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
autoSelect: true,
store: locationStore,
queryMode: 'local',
multiSelect: true,
lazyRender: true,
valueField:'locAreaId',
displayField: 'locAreaName',
listClass: 'x-combo-list-small'
//value: 'losLocationCodes',
//data : 'losLocationCodes',
/*
listeners : {
'beforeselect' : function(combo, record,index){
},
'change': function(combo, newValue, oldValue){
},
'afterrender': function(combo, record1) {
}
}
*/
}
},{
id: 'Entity',
header: 'entity',
dataIndex: 'entity',
width: 30,
editor: {
disabled: true
}
} , {
id: 'locationCode',
header: 'Location Code',
dataIndex: 'locationCode',
width: 50,
editor: {
disabled: true
}
} ,{
id: 'deptId',
header: 'Dept Code',
dataIndex: 'deptId',
width: 50,
editor: {
disabled: true
}
} ,{
id: 'deptName',
header: 'Dept Name',
dataIndex: 'deptName',
flex: 1,
editor: {
disabled: true
}
}],
selModel: {
selType: 'cellmodel'
//selType: 'checkboxmodel'
},
renderTo: 'editor-grid',
tbar: [{
text: 'Select All'
}],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
pluginId: 'employeeEditing',
autoCancel: false,
listeners: {
'beforeedit': function(editor, e, eOpts) {
// alert(editor.rowIdx)
// alert(editor.field)
// alert(editor.value)
if (editor.record.get('entity') == 2 || editor.record.get('entity') == 02){
grid.getPlugin('employeeEditing').editor.form.findField('losPlanCodes').disable();
grid.getPlugin('employeeEditing').editor.form.findField('losLocationCodes').disable();
} else if (editor.record.get('entity') == 8 || editor.record.get('entity') == 08){
grid.getPlugin('employeeEditing').editor.form.findField('losPlanCodes').disable();
}
/*
var me = this;
this.isEditAllowed = false;
this.cancelEdit();
Ext.MessageBox.show({
title: 'Not Allowed to Edit',
msg: 'Not Allowed to Edit this record with entity'+ this.entity,
icon: Ext.MessageBox.INFO,
buttons: Ext.Msg.OK
});
return true;
*/
},
'cancelEdit': function(editor) {
grid.getPlugin('employeeEditing').editor.form.findField('losPlanCodes').enable();
grid.getPlugin('employeeEditing').editor.form.findField('losLocationCodes').enable();
},
'validateedit': function(e) {
},
'edit': function(editor) {
if (editor.record.get('entity') == 2 || editor.record.get('entity') == 02){
grid.getPlugin('employeeEditing').editor.form.findField('losPlanCodes').enable();
grid.getPlugin('employeeEditing').editor.form.findField('losLocationCodes').enable();
}
else if (editor.record.get('entity') == 8 || editor.record.get('entity') == 08){
grid.getPlugin('employeeEditing').editor.form.findField('losPlanCodes').enable();
}
}
}
})
],
listeners: {
'render': function(grid) {
}
}
});
grid.getSelectionModel().on('selectionchange', this.onSelectChange, this);
请帮忙
] [1]
答案 0 :(得分：1)
最有可能是在加载数据之前设置组合框的值。查看事件的顺序，尝试在存储加载时使用回调，并在此之后设置其值。
答案 1 :(得分：1)
您现在可能已经想到了这一点，但是如果没有，您需要在列配置中使用自定义renderer来取出显示字段，即：
{
id:'losPlanCodes',
header: 'LOS Plan Name',
dataIndex: 'losPlanCodes',
width: 250,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
tooltip: 'losPlanName',
selectOnTab: true,
store: planStore,
queryMode: 'local',
lazyRender: true,
multiSelect: true,
displayField: 'planName',
valueField:'planId'
},
renderer: function(value, metaData, record, row, col, store, view) {
return planStore.getById(value).get('planName');
}
},