Display problem of ComboBox column in Extjs EditorGridPanel_extjs

In order to solve this problem, you need to use the renderer attribute where the ComboBox is displayed in the ColumnModel of the EditorGridPanel and re-render as follows:

Copy code The code is as follows:

//Department list
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' }
]

})
});
//Render according to the value of the corresponding Id in the Combobox list
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; // Get the value of the display field in the data set in record
}
}


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: 'name',
width: 40,
dataIndex: 'name'
}, {
header: 'Department',
width: 80,
dataIndex: 'department',
renderer: rendererDepartmentCombobox,
editor: new Ext.form.ComboBox({
id: "cbdepartment", //Must have
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, //store used by EditorGridPanel
trackMouseOver: true,
disableSelection: false,
clicksToEdit: 1, //Set how many clicks to edit
loadMask : true,
autoHeight: true,
cm: cm,
sm: sm,
viewConfig: {
columnsText: 'Show/hide columns',
sortAscText: 'Forward order Arrange',
sortDescText: 'Arrange in reverse order',
forceFit: true,
enableRowBody: true
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Currently displaying {0} to {1}, a total of {2} records',
emptyMsg: "There is currently no record"
})
});