set field type in editor grid based on a combo box selection

[bikram]

Sorry, just a newbie question
i assume simply using it as renderer:'valueRenderer()', in the appropriate column config in the cm should do the trick?

my column has two editors (both are combobxes). that is, a set of rows has one editor while the other has a different editor, on the same column. both use similar set of keys (eg {1,2,3,4,5} and {1,2}), but different display values. I kept trying to use the construct below, but it almost appears to do nothing. Must be a fault on my part.

Any advice much appreciated.

thanks
bikram

It's:

Ext.util.Format.valueRenderer = function(enumCombo){
    return function(value, metadata, record, rowIndex, colIndex, store){
        var editor = cm.getCellEditor(colIndex, rowIndex),
            field = editor ? editor.field : null;
        if(field && field.findRecord){
            var record = field.findRecord(field.valueField, value);
            return record ? record.get(field.displayField) : field.valueNotFoundText;
        }
        return value;
    }
};

[Condor]

1. It's: renderer:'valueRenderer' (without the ()).
2. The code I posted is not very useful, because it requires access to the 'cm' columnmodel of the grid.

[bikram]

for now, i added this to the columns in the cm, and so far it is working , except for a minor issue.
I will troubleshoot that issue some more before i ask for some guidance.
Certainly the approach below will lead to code duplication if there are several columns, but i couldn't see an easy way to have a reusable renderer that could also take in the cm as a param.

renderer : function(val,meta,record,rowIndex,colIndex){
                var editor = cm.getCellEditor(colIndex, rowIndex),
                field = editor ? editor.field : null;
                if(field && field.findRecord){
                    var record = field.findRecord(field.valueField, val);
                    return record ? record.get(field.displayField) : field.valueNotFoundText;
                }
                return val;
            }

thanks very much
bikram

[Whatty]

Example:

var store = new Ext.data.SimpleStore({
    data: [
        ['Value 1', 'text', 'text'],
        ['Value 2', 'number', 1],
        ['Value 3', 'date', new Date()]
    ],
    fields: ['name', 'type', 'value']
});
var comboStore = new Ext.data.SimpleStore({
    id: 0,
    data: [
        ['text', 'Text'],
        ['number', 'Number'],
        ['date', 'Date']
    ],
    fields: ['type', 'name']
});
var typeEditor = new Ext.form.ComboBox({
    store: comboStore,
    mode: 'local',
    triggerAction: 'all',
    valueField: 'type',
    displayField: 'name',
    editable: false    
});
var typeRenderer = function(value) {
    var rec = comboStore.getById(value);
    return rec ? rec.get('name') : '';
}
var colModel = new Ext.grid.ColumnModel({
    columns: [
        {header: 'Name', dataIndex: 'name', sortable: true, editor: new Ext.form.TextField({})},
        {header: 'Type', dataIndex: 'type', sortable: true, renderer: typeRenderer, editor: typeEditor},
        {header: 'Value', dataIndex: 'value', sortable: true, editable: true}
    ],
    editors: {
        'text': new Ext.grid.GridEditor(new Ext.form.TextField({})),
        'number': new Ext.grid.GridEditor(new Ext.form.NumberField({})),
        'date': new Ext.grid.GridEditor(new Ext.form.DateField({}))
    },
    getCellEditor: function(colIndex, rowIndex) {
        var field = this.getDataIndex(colIndex);
        if (field == 'value') {
            var rec = store.getAt(rowIndex);
            return this.editors[rec.get('type')];
        }
        return Ext.grid.ColumnModel.prototype.getCellEditor.call(this, colIndex, rowIndex);
    }
});
var grid = new Ext.grid.EditorGridPanel({
    ds: store,
    cm: colModel
});
Ext.onReady(function(){
    new Ext.Viewport({
        layout: 'fit',
        items: [grid]
    });
});

Is there a version of this example that is compatible with ExtJS 4.x

Thanks in advance.

Whatty