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

score 41 · Accepted Answer · edited Dec 01 '15 at 12:24

41

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.

edited Dec 01 '15 at 12:24

Paolo Stefan

10,112
5
45
64

answered Oct 07 '11 at 05:32

Molecular Man

22,277
3
72
89

1

Yes, that would work for the CellEditing. For the RowEditing it will only trigger beforeedit once per row and not per column. – Asken Oct 07 '11 at 06:05
Brilliant! Worked like a charm. Tried to the a hold of the form field but I missed the findField-function. Thanks! – Asken Oct 07 '11 at 06:59
for my case it worked 1st solution as my requirement was disable editing on action column click. Thanks.. – Hussain KMR Behestee Jul 04 '13 at 07:38
2

2011 question and helped me to this day. Thanks everyone involved – EagleFox Sep 04 '14 at 16:11
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!! – Lawrence Jan 13 '15 at 17:59
1

@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. – Molecular Man Jan 14 '15 at 12:47

Martin Zeitler · Answer 2 · 2021-09-16T13:14:42.160

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

edited Sep 16 '21 at 13:14

answered Aug 07 '15 at 01:19

Martin Zeitler

1
19
155
216

this is a repeticion of @Molecular Man answser – alexandre1985 May 05 '16 at 18:24
@alexandre1985 it isn't because the listener is defined whole differently; please learn about `Ext.define` before down-voting. – Martin Zeitler May 06 '16 at 13:44
@alexandre1985 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 :) – Martin Zeitler May 26 '16 at 03:35

alexandre1985 · Answer 3 · 2016-05-05T18:35:47.403

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

ExtJS 4 RowEditing disable edit on one column based on record

3 Answers3

Linked