ExtJS 4 RowEditing disable edit on one column based on record

Question

I\'m implementing a grid panel with the four last columns editable for most of the rows. The problem is that I\'d like to be able to disable editing on, let\'s say the first one

Answer 1

Since @Molecular Man answer makes the disabled column look kinda funny when rowediting is editing I thought of another way that looks perfect. All you have to do is create a function, that may be for example:

function fieldFormat() {
    if(isGuest) {
        return null; //is not editable
    } else {
        //how you want the column's field config to be formated
        var json = Ext.JSON.decode("{xtype: 'textfield',maxLength: 40}");
        return json;
    }
}

and in the grid, you put something like this:

var grid = Ext.create('Ext.grid.Panel', {
    plugins: [grid_rowEditing],
    store: store,
    columns: [
    {
        text     : 'Name',
        dataIndex: 'name',
        field    : fieldFormat()
    }]
});

and when isGuest is true the field 'name' won't be editable. When it's false, it will be editable

Answer 2

(based on the previous example) an alternate way is to configure the editor's beforeedit listener:

listeners: {
    beforeedit: function(editor, context) {
        var form   = editor.getEditor().form;
        var field  = form.findField('column_name');
        var status = parseInt(context.record.data.status);
        if(status === 4){field.disable();} else {field.enable();}
    }
}

Answer 3

Use beforeedit event:

grid.on('beforeedit', function(editor, e) {
  if (e.colIdx === 0 && e.record.get('status') == 4)
    return false;
});

UPDATE
The solution above is not working for rowEditor.
However you can make needed field to be disabled on beforeedit. To do that you should be able to access rowediting plugin. Assign pluginId to plugin:

plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1,
        pluginId: 'rowEditing'
    })
],

Now just disable needed field if some conditions are met:

grid.on('beforeedit', function(editor, e) {
    if (e.record.get('status') === 4 ){
         grid.getPlugin('rowEditing').editor.form.findField('fieldToDisable').disable();
    }
    else{
        grid.getPlugin('rowEditing').editor.form.findField('fieldToDisable').enable();
   });

Here is demo (try to edit first row).

Edit

If the above JSFiddle does not work, try its updated version.