English
资源说明：EditorGridPanel中嵌入ComboBox通常不会正常显示ComboBox的store中本想显示字段，而是显示的EditorGridPanel中 store的dataindex指定的字段内容。
在EXTJS中，EditorGridPanel是一种可编辑的表格组件，它允许用户直接在表格单元格内编辑数据。然而，当在EditorGridPanel中嵌入ComboBox（下拉选择框）作为编辑器时，可能会遇到一个问题，即ComboBox显示的不是其store中设定的displayField（显示字段），而是EditorGridPanel自身store的数据index字段内容。
这个问题的原因在于，EditorGridPanel默认使用dataIndex属性来获取要显示的数据，而ComboBox需要的是其store中的displayField来显示文本。为了解决这个问题，我们需要在ColumnModel中对包含ComboBox的列使用`renderer`属性来自定义单元格的渲染方式。
以下是一个示例代码片段，展示了如何解决这个问题：
```javascript
// 部门列表的store
var comboxDepartmentStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: "GetDepartmentJson.aspx",
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalCount',
fields: [
{ name: 'departmentid', mapping: 'ID' },
{ name: 'departmentname', mapping: 'Name' }
]
})
});
// 渲染函数，根据ComboBox的valueField匹配并返回displayField的值
function rendererDepartmentCombobox(value, p, r) {
var index = comboxDepartmentStore.find(Ext.getCmp('cbdepartment').valueField, value);
var record = comboxDepartmentStore.getAt(index);
var displayText = "";
if (record == null) {
return value;
} else {
return record.data.departmentname; // 获取record中的displayField的值
}
}
// 创建CheckboxSelectionModel
var sm = new Ext.grid.CheckboxSelectionModel();
// 创建ColumnModel
var cm = new Ext.grid.ColumnModel({
columns: [
sm,
new Ext.grid.RowNumberer(),
{ header: 'id', dataIndex: 'id', hidden: true },
{ header: '姓名', width: 40, dataIndex: 'name' },
{
header: '所属部门',
width: 80,
dataIndex: 'department', // 这里是EditorGridPanel store中的字段
renderer: rendererDepartmentCombobox, // 使用renderer函数重绘该列
editor: new Ext.form.ComboBox({
id: "cbdepartment",
forceSelection: true,
selectOnFocus: true,
typeAhead: true,
triggerAction: 'all',
store: comboxDepartmentStore,
mode: 'local',
displayField: 'departmentname', // ComboBox的显示字段
valueField: 'departmentid', // ComboBox的值字段
lazyRender: true
})
}
],
// ...其他配置...
});
```
在这个例子中，我们创建了一个名为`comboxDepartmentStore`的store，用于存储部门名称和ID。然后，我们在ColumnModel中定义了一个列，该列使用`rendererDepartmentCombobox`函数进行渲染，这个函数会根据当前cell的值在`comboxDepartmentStore`中查找对应的记录，并返回displayField的值（在这个例子中是`departmentname`）。
通过这种方式，我们确保了ComboBox在EditorGridPanel中显示的是其store中对应的displayField值，而不是EditorGridPanel store中的dataIndex字段。这不仅解决了ComboBox显示问题，也为用户提供了一个更直观的编辑体验。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
