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

user_688653 0
Viewed 29449

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

grid extjs javascript
3 Answers

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;
            }
        }
    })
]
user_63723980
Related