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']]},
   ...
];