The Ext.grid.plugin.CellEditing plugin injects editing at the cell level for a Grid. The editor field can be a field instance or a field configuration which needs to be provided within the editor configuration option within the columns definition. With the CellEditing plugin we can edit a cell at any time. If an editor is not specified for a particular column, that cell cannot be edited and it will be skipped when activated via the mouse or the keyboard.

When we configure a column to use an editor for cell editing, we should choose an appropriate field type to match the data type that this editor field will be editing. For example, to edit a date value in the cell, it would be useful to specify Ext.form.field.Date as the editor.

Here, in the following code we are defining a grid class in which we are using the CellEditing plugin to edit the cells:

Ext.define('Examples.view.cellediting.CellEditingGrid', {
  extend : 'Ext.grid.Panel',
  alias : 'widget.celleditingGrid',
  requires : ['Examples.store.DummyStore',
              'Ext.grid.plugin.CellEditing', 
              'Ext.form.field.Date'],

  constructor : function(config) {

    Ext.apply(this, {
      store : Ext.create('Examples.store.DummyStore'),
      columns : [{
        header : 'Name',
        dataIndex : 'name',
        flex : 1,
        editor : 'textfield'
      },
      {
        header : 'Birth date',
        dataIndex : 'birthdate',
        renderer : Ext.util.Format.dateRenderer('m/d/Y'),
        flex : 1,
        editor : {
          xtype : 'datefield',
          allowBlank : false
        }
      }],
      selType : 'cellmodel',
      plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit : 1
      })]
    });

    this.callParent(arguments); 

  }
});

You can see in the code that in the columns definition, the editor configuration has been provided with the textfield option to edit the Name cells and the datefield option to edit the Birth date cells. To support cell editing, it's specified that the grid should use the cellmodel option for selType, and create an instance of the CellEditing plugin. The plugin has been configured to activate each editor after a single click, by setting the clicksToEdit configuration option to 1. The value can be set to 2 too, for the clicksToEdit option to activate the editor by double-click. There is another configuration option called triggerEvent, which also triggers the editing, and supercedes the clicksToEdit configuration option. The value for triggerEvent option can be set to cellclick, celldblclick, cellfocus, and rowfocus.

Here, in the following screenshot you can see the result of the CellEditingGrid class that we have defined which is used within a window:

You can see that a date field allows you to choose a date from a date picker as soon as the cell is clicked.

This plugin is well documented at http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.grid.plugin.CellEditing, where you will get all the available configuration options, properties, methods, and events for this plugin.