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 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

Cabrera

Answer 1

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.

Yerxa

Yes, that would work for the CellEditing. For the RowEditing it will only trigger beforeedit once per row and not per column. – Cabrera

Brilliant! Worked like a charm. Tried to the a hold of the form field but I missed the findField-function. Thanks! – Cabrera

for my case it worked 1st solution as my requirement was disable editing on action column click. Thanks.. – Hearn

2011 question and helped me to this day. Thanks everyone involved – Fellows

I used this with a dynamic grid. All I did was set the editable: true or false on the column config. It works. No need for a listener, no need for setting anything disabled... Ext4.2.2. I mean the column config of the grid, NOT the field or editor config!! – Direct

@Lawrence, I doubt that simple editing of the config would solve the OP's problem. Especially this part I'd like to be able to disable editing on, let's say the first one if record.get('status') = 4. But if you solved it just post it as an answer so that it would help other people. – Yerxa

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

Truly

this is a repeticion of @Molecular Man answser – Bladderwort

@Bladderwort it isn't because the listener is defined whole differently; please learn about Ext.define before down-voting. – Truly

@Bladderwort please learn to read/write and comprehend - as well as scripting ExtJS, in the first place; NOW I've voted your answer down... because it clearly shows how little clue you have of what you are talking about... and I'm not the only one with this opinion :) – Truly

Answer 3

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

Bladderwort