Ext-JS: How to disable cell editing for individual cells in a grid?

Question

I am now building a web application with Ext-JS 4.0.2, and I am using a editable grid to control the data to be shown for a table on the same page.

To make the grid editable, I followed the API documentation and used the following:

selType: 'cellmodel',
plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2
    })
]

However, for this grid, there are several cells that are not supposed to be changed.

I could simply let the event handler change the data back to the right state once it is changed in the grid, but this seems to be hacky, hard to maintain, and unreadable. Is there any better way to do this? I read the API but cannot find any useful attributes.

UPDATE

As for this particular app, just disable the first row would work. But I am also interested in choose several grid and make them not editable (imagine a Sudoku game with a grid).

Answer 1

As I've understand from comments you want to make first row not editable. There is ugly but quick solution. Assign to your plugin beforeedit handler. And when event is being fired check what row is being edited. If first - return false :

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2,
        listeners: {
            beforeedit: function(e, editor){
                if (e.rowIdx == 0)
                    return false;
            }
        }
    })
]

Check out docs for beforeedit .

UPDATE

Docs say that beforeedit has such set of params:

beforeedit( Ext.grid.plugin.Editing editor, Object e, Object options )

But there is mistake. The correct sequance is:

beforeedit( Object e, Ext.grid.plugin.Editing editor, Object options )

I've updated example due to this fact.

Answer 2

You can specify ColumnModel to declare editable and not editable columns:

    var cm = new Ext.grid.ColumnModel({
        columns: [{
                     dataIndex: 'id',
                     header: 'id',
                     hidden: true
                  },{ 
                     dataIndex: '1',
                     header: '1',                   
                     editor: new Ext.form.TextField({})
                  },{ 
                     dataIndex: '2',
                     header: '2',                   
                     editor: new Ext.form.NumberField({})
                  },{ 
                     dataIndex: '3',
                     header: '3'
                  }]
            });

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        clicksToEdit: 2,
        cm: cm
        ...

In this example column id is unvisible, columns 1 and 2 editable (with text and number editors) and column 3 is not editable.

UPDATE:

Prevent row editing:

    grid.on('beforeedit', function(event) {
        if (event.row == 0) {
             this.store.rejectChanges();
             event.cancel = true;
         }
    }, grid);

Answer 3

As Ziyao Wei mentioned the documentation for the beforeEdit event is wrong. However you need to reference the 'editor' parameter to get the row index and other values, not the first object parameter 'e'. Updated example:

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2,
        listeners: {
                beforeedit: function(e, editor){
                if (editor.rowIdx == 0)
                    return false;
            }
        }
    })
]