Sencha Documentation

Ext.grid.Editing

Overview

This class provides cell editing on selected columns. The editable columns are specified by providing an editor in the column configuration.

Editability of columns may be controlled programatically by inserting an implementation of isCellEditable into the ColumnModel.

Editing is performed on the value of the field specified by the column's dataIndex in the backing Store (so if you are using a renderer in order to display transformed data, this must be accounted for).

If a value-to-description mapping is used to render a column, then a ComboBox which uses the same value-to-description mapping would be an appropriate editor.

If there is a more complex mismatch between the visible data in the grid, and the editable data in the Store, then code to transform the data both before and after editing can be injected using the beforeedit and afteredit events.

Config Options

 
autoEncode : Boolean
True to automatically HTML encode and decode values pre and post edit (defaults to false)
True to automatically HTML encode and decode values pre and post edit (defaults to false)
 
clicksToEdit : Number
The number of clicks on a cell required to display the cell's editor (defaults to 2). Setting this option to 'auto' m...

The number of clicks on a cell required to display the cell's editor (defaults to 2).

Setting this option to 'auto' means that mousedown on the selected cell starts editing that cell.

 
forceValidation : Boolean
True to force validation even if the value is unmodified (defaults to false)
True to force validation even if the value is unmodified (defaults to false)

Methods

 
isFieldEditable : Void
User overrideable to provide custom editing available logic.
User overrideable to provide custom editing available logic.
 
startEditing( Number rowIndex, Number colIndex ) : Void
Starts editing the specified for the specified row/column
Starts editing the specified for the specified row/column

Parameters

  • rowIndex : Number
  • colIndex : Number

Returns

  • Void

Events

 
afteredit( Object e )
Fires after a cell is edited. The edit event object has the following properties <br /> <ul style="padding:5px;paddin...
Fires after a cell is edited. The edit event object has the following properties
  • grid - This grid
  • record - The record being edited
  • field - The field name being edited
  • value - The value being set
  • originalValue - The original value for the field, before the edit.
  • row - The grid row index
  • column - The grid column index
grid.on('afteredit', afterEdit, this );

function afterEdit(e) {
    // execute an XHR to send/commit data to the server, in callback do (if successful):
    e.record.commit();
};

Parameters

  • e : Object
    An edit event (see above for description)

Returns

  • Void
 
beforeedit( Object e )
Fires before cell editing is triggered. The edit event object has the following properties <br /> <ul style="padding:...
Fires before cell editing is triggered. The edit event object has the following properties
  • grid - This grid
  • record - The record being edited
  • field - The field name being edited
  • value - The value for the field being edited.
  • row - The grid row index
  • column - The grid column index
  • cancel - Set this to true to cancel the edit or return false from your handler.

Parameters

  • e : Object
    An edit event (see above for description)

Returns

  • Void
 
validateedit( Object e )
Fires after a cell is edited, but before the value is set in the record. Return false to cancel the change. The edit ...
Fires after a cell is edited, but before the value is set in the record. Return false to cancel the change. The edit event object has the following properties
  • grid - This grid
  • record - The record being edited
  • field - The field name being edited
  • value - The value being set
  • originalValue - The original value for the field, before the edit.
  • row - The grid row index
  • column - The grid column index
  • cancel - Set this to true to cancel the edit or return false from your handler.
Usage example showing how to remove the red triangle (dirty record indicator) from some records (not all). By observing the grid's validateedit event, it can be cancelled if the edit occurs on a targeted row (for example) and then setting the field's new value in the Record directly: 
grid.on('validateedit', function(e) {
  var myTargetRow = 6;

  if (e.row == myTargetRow) {
    e.cancel = true;
    e.record.data[e.field] = e.value;
  }
});

Parameters

  • e : Object
    An edit event (see above for description)

Returns

  • Void
© 2011 Sencha Inc.