Extjs EditorGridPanel中ComboBox列的显示问题


为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下:
复制代码 代码如下:

//部门列表
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列表中对应的Id的值来渲染
function rendererMeterTypeCombobox(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.astype; // 获取record中的数据集中的display字段的值
}
}


var sm = new Ext.grid.CheckboxSelectionModel();

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,
renderer: rendererDepartmentCombobox,
editor: new Ext.form.ComboBox({
id: "cbdepartment", //必须有
forceSelection: true,
selectOnFocus: true,
typeAhead: true,
triggerAction: all,
store: comboxDepartmentStore,
mode: local,
displayField: departmentname,
valueField: departmentid,
lazyRender: true
})
}],
defaults: {
zsortable: true,
menuDisabled: false,
width: 100
}
});

var editGrid = new Ext.grid.EditorGridPanel({
id: TestGrid,
store: store, //EditorGridPanel使用的store
trackMouseOver: true,
disableSelection: false,
clicksToEdit: 1, //设置点击几次才可编辑
loadMask: true,
autoHeight: true,
cm: cm,
sm: sm,
viewConfig: {
columnsText: 显示/隐藏列,
sortAscText: 正序排列,
sortDescText: 倒序排列,
forceFit: true,
enableRowBody: true
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 当前显示从{0}至{1}, 共{2}条记录,
emptyMsg: "当前没有记录"
})
});