Display of ComboBox columns in Extjs EditorGridPanel

To solve this problem, you need to use the renderer attribute in the ColumnModel of EditorGridPanel to display the ComboBox and re-render it. The method is as follows: Copy codeThe 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: 'inclumentid', mapping: 'id '},
{Name: 'destentname', mapping: 'name '}
]

})
});
// Rendering based on 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; // obtain the value of the display field in the dataset 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", // required
ForceSelection: true,
SelectOnFocus: true,
TypeAhead: true,
TriggerAction: 'all ',
Store: comboxDepartmentStore,
Mode: 'local ',
DisplayField: 'destentname ',
ValueField: 'inclumentid ',
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 the number of clicks to be editable
LoadMask: true,
AutoHeight: true,
Cm: cm,
Sm: sm,
ViewConfig :{
ColumnsText: 'show/hide column ',
SortAscText: 'sort in the forward Order ',
SortDescText: 'sort in descending order ',
ForceFit: true,
EnableRowBody: true
},
Bbar: new Ext. PagingToolbar ({
PageSize: 25,
Store: store,
DisplayInfo: true,
DisplayMsg: 'currently {0} to {1}, {2} records in total ',
EmptyMsg: "No records currently"
})
});