ExtJS RowEditor on Grid - extjs

Question

When my users edits the Grid via RowEditor combo entries and checkboxes are annoying
1 Apple
2 Orange
3 Pear
For instance with the combo above the user will select Orange then update - the Grid now instead of saying orange will display the number 2 - I would like it to show orange when a successful edit has been made.
code for my combo
editor : {
allowBlank : false,
displayField : 'team',
editable : false,
emptyText : 'Select Team',
forceSelection : true,
lazyRender : true,
mode : 'remote',
name : 'team',
store : storeTeam,
triggerAction : 'all',
valueField : 'id',
xtype : 'combo'
}
I think I read that you could send the complete row back to insert or I should listen to the update of the grid and then change the field but I need some guidance on what is best
Cheers

Answer 1

Try the code below. Use this column just like you would any other ExtJS grid column.
Ext.grid.FixedListColumn = Ext.extend(Ext.grid.Column, {
constructor: function(cfg){
cfg.editor = new Ext.form.ComboBox(cfg.editor);
Ext.grid.ComboBoxColumn.superclass.constructor.call(this, cfg);
this.renderer = Ext.util.Format.comboRenderer(cfg.editor);
}
});
Ext.grid.Column.types.fixedlistcolumn = Ext.grid.FixedListColumn;
// Takes in a combobox and returns a renderer that looks up the displayField in
// the store attached to the combo
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}
// Use this as the 'columns' parameter when creating your Grid
var grid_columns = [
{xtype:'fixedlistcolumn',
store: [[1,'Apple'],[2,'Orange']]},
...
];

Answer 2

I hope this helps...
You can add renderer definition to your team column:
Below is example of how simple true/false values are represented as Yes/No in the GridPanel:
renderer:function(val){
if(val=="true" || val == true) {
return "Yes";
}
else{
return "No";
}
}