The embedded ComboBox in the EditorGridPanel usually does not display the expected field in the store of the ComboBox, but the field content specified by the store dataindex in the 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:
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: '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"
})
});