How to set editor for a column programmatically in a grid

Question

I have a Ext.grid.Panel with a set of columns. This grid is filtered, and depending on the filter I would like to define an editor for a column.

My grid:

Ext.define('Mb.view.MyPanel', {
    extend: 'Ext.grid.Panel',
    columns: [
        {text: 'Order #', dataIndex: 'id'},
        {text: 'Action', dataIndex: 'type',
            renderer: function(value){
                if(value == 'BP') return Lang._('Veuillez choisir')
                 return ''
            }
        },

Now I would like to do something like:

var panel = Mb.app.getView('MyPanel');
if (condition == true) {
    panel.getColumns[1].setEditor({
        xtype: 'textfield',
        ...
    })
}

Obviously the methods getColumns and setEditor do not exist. I therefore need another method to activate an editor on that column.
I didn't find a method to access the column definitions to modifiy them and to rerender the grid afterwards.

Can you give me a hint in which direction to search ? Thanks.

Answer 1

Check out the docs for getEditor() on Ext.grid.column.Column. If you are using an Editing plugin, the plugin provides implementation for getEditor(), as well as setEditor(). Based on column being edited and any custom logic you implement, you could implement a custom getEditor() method to return whatever editor instance you want based on the circumstances.

The documentation says:

getEditor( record, defaultField ) : Ext.form.field.Field

This really tells a small part of the truth.

• getEditor is not only a method of Ext.grid.column.Column, but also a config option.
• If getEditor is defined as config option function get's called as getEditor( record ) and needs to return a Ext.grid.CellEditor.
• This will work with the cellediting plugin, but not with the rowediting plugin.

Here is an example of a column configuration. It will create a combobox only on selected rows :

columns: [{
    text: 'Action', dataIndex: 'action', 
    getEditor: function(record){
        if( my logic ){
            return Ext.create('Ext.grid.CellEditor', {
                field: Ext.create( 'Ext.form.field.ComboBox', {
                    forceSelection: true,
                    store: [[1, 'Option 1'], [2, 'Option 2']]
                })
            })
        } else return false;
    }
},