ExtJs 4 conditional Grid Cell Editing and Row Editing

If you are using the Ext.grid.plugin.CellEditing for cell editing in a grid then all the cells in grid column becomes eligible for editing as as soon as you specify an editor. Now lets say you have some records in a grid that are ineligible based on some criteria. For simplicity sake lets say we don't want to edit any records with inactive status, we need to capture the beforeedit event to help us out here

cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1,
            listeners: {
                beforeedit: function(obj) {
                        return obj.record.get('status');  
                        //you can update the above logic to something else
                        //based on your criteria send false to stop editing
                }   
            }
        });

beforeedit( Object e, Object eOpts )
Fires before cell editing is triggered. Return false from event handler to stop the editing.

Parameters

• e : Object
• An edit event with the following properties:
• grid - The grid
• record - The record being edited
• field - The field name being edited
• value - The value for the field being edited.
• row - The grid table row
• column - The grid Column defining the column that is being edited.
• rowIdx - The row index that is being edited
• colIdx - The column index that is being edited
• cancel - Set this to true to cancel the edit or return false from your handler.
• eOpts : Object
• The options object passed to Ext.util.Observable.addListener.

Tip: You can use the same logic for Ext.grid.plugin.RowEditing

In case you would like to ask the user whether they would like to edit the grid cell. Here is a sample code to do just that using a variable that is switched on or off based on the users choice.

plugins: [
          Ext.create('Ext.grid.plugin.CellEditing', {
              clicksToEdit: 1,
            listeners: {
              'beforeedit': function(e) {
                var me = this;
                var allowed = !!me.isEditAllowed;
                if (!me.isEditAllowed)
                  Ext.Msg.confirm('confirm', 'Are you sure you want edit?', function(btn){
                    if (btn !== 'yes')
                      return;
                    me.isEditAllowed = true;
                    me.startEditByPosition({row: e.rowIdx, column: e.colIdx});
                  });
                return allowed;
              },
              'edit': function(e) {
                this.isEditAllowed = false;
              }
            }
          })
      ],

Recommended Reading

• ExtJs 4 Grid Editing tutorial - Java Servlet, JSON and MySQL