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.

score 10 · Accepted Answer · edited Dec 04 '13 at 14:28

10

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

edited Dec 04 '13 at 14:28

Lorenz Meyer

17,418
21
68
109

answered Dec 03 '13 at 14:42

existdissolve

3,074
1
13
12

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 ? – Lorenz Meyer Dec 03 '13 at 15:18
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. – Lorenz Meyer Dec 03 '13 at 15:20
Yeah, you simply define "getEditor()" for the column definition. Check out this fiddle for an example: https://fiddle.sencha.com/#fiddle/2d – existdissolve Dec 03 '13 at 15:46
Sure thing, glad it was helpful! – existdissolve Dec 03 '13 at 20:37
This is heavily undocumented. I edit your answer to include your example. – Lorenz Meyer Dec 04 '13 at 14:07

How to set editor for a column programmatically in a grid

1 Answers1