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.

Faustofaustus

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

Streetman

I think I get the idea: I write a getEditor(record) and return whatever a field a like for the row. But where do I need to define it ? As a config option of the column ? This also means that there can be different editors on a row basis, am I right ? – Faustofaustus

On the other hand, when I'd like to use the setEditor method of the column, I need a reference to the column, and Idon't know how to get this from the grid object. – Faustofaustus

Yeah, you simply define "getEditor()" for the column definition. Check out this fiddle for an example: fiddle.sencha.com/#fiddle/2d – Streetman

This is heavily undocumented. I edit your answer to include your example. – Faustofaustus