ExtJS 4 RowEditing disable edit on one column based on record

22
votes

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 if record.get('status') = 4 which is finalized and only two of the columns should be editable.

Is there a way to disable showing the edit for those rows? I can do it using CellEditing but want to keep using the RowEditing plugin.

Regards, Kristian

3
gridextjs4

3 Answers

40
votes

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.

2
votes

(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();}
    }
}
-1
votes

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