CODEWITHSUNDEEP
extjsgrid
Ian Warner
Ian Warner

Reputation: 1068

ExtJS RowEditor on Grid

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

Upvotes: 0

Views: 6431

Answers (2)

Daniel Beardsley
Daniel Beardsley

Reputation: 20357

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

Upvotes: 1

Goran
Goran

Reputation: 1837

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";
                }
            }

Upvotes: 0

Related Questions