/**
- * @class Ext.grid.plugin.CellEditing
- * @extends Ext.grid.plugin.Editing
- *
- * The Ext.grid.plugin.CellEditing plugin injects editing at a cell level for a Grid. Only a single
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * The Ext.grid.plugin.CellEditing plugin injects editing at a cell level for a Grid. Only a single
* cell will be editable at a time. The field that will be used for the editor is defined at the
- * {@link Ext.grid.column.Column#field field}. The editor can be a field instance or a field configuration.
+ * {@link Ext.grid.column.Column#editor editor}. The editor can be a field instance or a field configuration.
*
* If an editor is not specified for a particular column then that cell will not be editable and it will
* be skipped when activated via the mouse or the keyboard.
@@ -13,10 +27,7 @@
* An appropriate field type should be chosen to match the data structure that it will be editing. For example,
* to edit a date, it would be useful to specify {@link Ext.form.field.Date} as the editor.
*
- * {@img Ext.grid.plugin.CellEditing/Ext.grid.plugin.CellEditing.png Ext.grid.plugin.CellEditing plugin}
- *
- * ## Example Usage
- *
+ * @example
* Ext.create('Ext.data.Store', {
* storeId:'simpsonsStore',
* fields:['name', 'email', 'phone'],
@@ -34,16 +45,16 @@
* }
* }
* });
- *
+ *
* Ext.create('Ext.grid.Panel', {
* title: 'Simpsons',
* store: Ext.data.StoreManager.lookup('simpsonsStore'),
* columns: [
- * {header: 'Name', dataIndex: 'name', field: 'textfield'},
+ * {header: 'Name', dataIndex: 'name', editor: 'textfield'},
* {header: 'Email', dataIndex: 'email', flex:1,
* editor: {
- * xtype:'textfield',
- * allowBlank:false
+ * xtype: 'textfield',
+ * allowBlank: false
* }
* },
* {header: 'Phone', dataIndex: 'phone'}
@@ -62,116 +73,123 @@
Ext.define('Ext.grid.plugin.CellEditing', {
alias: 'plugin.cellediting',
extend: 'Ext.grid.plugin.Editing',
- requires: ['Ext.grid.CellEditor'],
+ requires: ['Ext.grid.CellEditor', 'Ext.util.DelayedTask'],
constructor: function() {
- /**
+ /**
* @event beforeedit
- * Fires before cell editing is triggered. The edit event object has the following properties <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>grid - The grid</li>
- * <li>record - The record being edited</li>
- * <li>field - The field name being edited</li>
- * <li>value - The value for the field being edited.</li>
- * <li>row - The grid table row</li>
- * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that is being edited.</li>
- * <li>rowIdx - The row index that is being edited</li>
- * <li>colIdx - The column index that is being edited</li>
- * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
- * </ul>
- * @param {Ext.grid.plugin.Editing} editor
- * @param {Object} e An edit event (see above for description)
+ * Fires before cell editing is triggered. Return false from event handler to stop the editing.
+ *
+ * @param {Object} e 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 {@link Ext.grid.column.Column 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.
*/
- /**
+ /**
* @event edit
- * Fires after a cell is edited. The edit event object has the following properties <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>grid - The grid</li>
- * <li>record - The record that was edited</li>
- * <li>field - The field name that was edited</li>
- * <li>value - The value being set</li>
- * <li>originalValue - The original value for the field, before the edit.</li>
- * <li>row - The grid table row</li>
- * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that was edited.</li>
- * <li>rowIdx - The row index that was edited</li>
- * <li>colIdx - The column index that was edited</li>
- * </ul>
+ * Fires after a cell is edited. Usage example:
+ *
+ * grid.on('edit', function(editor, e) {
+ * // commit the changes right after editing finished
+ * e.record.commit();
+ * };
*
- * <pre><code>
-grid.on('edit', onEdit, this);
-
-function onEdit(e) {
- // execute an XHR to send/commit data to the server, in callback do (if successful):
- e.record.commit();
-};
- * </code></pre>
* @param {Ext.grid.plugin.Editing} editor
- * @param {Object} e An edit event (see above for description)
+ * @param {Object} e An edit event with the following properties:
+ *
+ * - grid - The grid
+ * - record - The record that was edited
+ * - field - The field name that was edited
+ * - value - The value being set
+ * - originalValue - The original value for the field, before the edit.
+ * - row - The grid table row
+ * - column - The grid {@link Ext.grid.column.Column Column} defining the column that was edited.
+ * - rowIdx - The row index that was edited
+ * - colIdx - The column index that was edited
*/
- /**
+ /**
* @event validateedit
- * 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 <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>grid - The grid</li>
- * <li>record - The record being edited</li>
- * <li>field - The field name being edited</li>
- * <li>value - The value being set</li>
- * <li>originalValue - The original value for the field, before the edit.</li>
- * <li>row - The grid table row</li>
- * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that is being edited.</li>
- * <li>rowIdx - The row index that is being edited</li>
- * <li>colIdx - The column index that is being edited</li>
- * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
- * </ul>
- * 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:
- * <pre><code>
-grid.on('validateedit', function(e) {
- var myTargetRow = 6;
-
- if (e.row == myTargetRow) {
- e.cancel = true;
- e.record.data[e.field] = e.value;
- }
-});
- * </code></pre>
+ * Fires after a cell is edited, but before the value is set in the record. Return false from event handler to
+ * cancel the change.
+ *
+ * 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(editor, e) {
+ * var myTargetRow = 6;
+ *
+ * if (e.row == myTargetRow) {
+ * e.cancel = true;
+ * e.record.data[e.field] = e.value;
+ * }
+ * });
+ *
* @param {Ext.grid.plugin.Editing} editor
- * @param {Object} e An edit event (see above for description)
+ * @param {Object} e An edit event with the following properties:
+ *
+ * - grid - The 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 table row
+ * - column - The grid {@link Ext.grid.column.Column 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.
*/
this.callParent(arguments);
this.editors = Ext.create('Ext.util.MixedCollection', false, function(editor) {
return editor.editorId;
});
+ this.editTask = Ext.create('Ext.util.DelayedTask');
+ },
+
+ onReconfigure: function(){
+ this.editors.clear();
+ this.callParent();
},
- /**
+ /**
* @private
* AbstractComponent calls destroy on all its plugins at destroy time.
*/
destroy: function() {
var me = this;
+ me.editTask.cancel();
me.editors.each(Ext.destroy, Ext);
me.editors.clear();
me.callParent(arguments);
},
+
+ onBodyScroll: function() {
+ var ed = this.getActiveEditor();
+ if (ed && ed.field) {
+ if (ed.field.triggerBlur) {
+ ed.field.triggerBlur();
+ } else {
+ ed.field.blur();
+ }
+ }
+ },
// private
// Template method called from base class's initEvents
initCancelTriggers: function() {
- var me = this;
+ var me = this,
grid = me.grid,
- view = grid.view;
-
- me.mon(view, {
- mousewheel: {
- element: 'el',
- fn: me.cancelEdit,
- scope: me
- }
- });
+ view = grid.view;
+
+ view.addElListener('mousewheel', me.cancelEdit, me);
+ me.mon(view, 'bodyscroll', me.onBodyScroll, me);
me.mon(grid, {
columnresize: me.cancelEdit,
columnmove: me.cancelEdit,
@@ -179,17 +197,16 @@ grid.on('validateedit', function(e) {
});
},
- /**
- * Start editing the specified record, using the specified Column definition to define which field is being edited.
- * @param {Model} record The Store data record which backs the row to be edited.
- * @param {Model} columnHeader The Column object defining the column to be edited.
- * @override
+ /**
+ * Starts editing the specified record, using the specified Column definition to define which field is being edited.
+ * @param {Ext.data.Model} record The Store data record which backs the row to be edited.
+ * @param {Ext.data.Model} columnHeader The Column object defining the column to be edited. @override
*/
startEdit: function(record, columnHeader) {
var me = this,
- ed = me.getEditor(record, columnHeader),
value = record.get(columnHeader.dataIndex),
- context = me.getEditingContext(record, columnHeader);
+ context = me.getEditingContext(record, columnHeader),
+ ed;
record = context.record;
columnHeader = context.column;
@@ -198,30 +215,31 @@ grid.on('validateedit', function(e) {
// cell DOM element. Completing the edit causes a view refresh.
me.completeEdit();
+ context.originalValue = context.value = value;
+ if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', context) === false || context.cancel) {
+ return false;
+ }
+
// See if the field is editable for the requested record
if (columnHeader && !columnHeader.getEditor(record)) {
return false;
}
-
+
+ ed = me.getEditor(record, columnHeader);
if (ed) {
- context.originalValue = context.value = value;
- if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', context) === false || context.cancel) {
- return false;
- }
-
me.context = context;
me.setActiveEditor(ed);
me.setActiveRecord(record);
me.setActiveColumn(columnHeader);
// Defer, so we have some time between view scroll to sync up the editor
- Ext.defer(ed.startEdit, 15, ed, [me.getCell(record, columnHeader), value]);
+ me.editTask.delay(15, ed.startEdit, ed, [me.getCell(record, columnHeader), value]);
} else {
// BrowserBug: WebKit & IE refuse to focus the element, rather
// it will focus it and then immediately focus the body. This
// temporary hack works for Webkit and IE6. IE7 and 8 are still
// broken
- me.grid.getView().el.focus((Ext.isWebKit || Ext.isIE) ? 10 : false);
+ me.grid.getView().getEl(columnHeader).focus((Ext.isWebKit || Ext.isIE) ? 10 : false);
}
},
@@ -258,8 +276,9 @@ grid.on('validateedit', function(e) {
},
getEditor: function(record, column) {
- var editors = this.editors,
- editorId = column.itemId || column.id,
+ var me = this,
+ editors = me.editors,
+ editorId = column.getItemId(),
editor = editors.getByKey(editorId);
if (editor) {
@@ -277,23 +296,31 @@ grid.on('validateedit', function(e) {
field: editor
});
}
- editor.parentEl = this.grid.getEditorParent();
+ editor.parentEl = me.grid.getEditorParent();
// editor.parentEl should be set here.
editor.on({
- scope: this,
- specialkey: this.onSpecialKey,
- complete: this.onEditComplete,
- canceledit: this.cancelEdit
+ scope: me,
+ specialkey: me.onSpecialKey,
+ complete: me.onEditComplete,
+ canceledit: me.cancelEdit
});
editors.add(editor);
return editor;
}
},
+
+ // inherit docs
+ setColumnField: function(column, field) {
+ var ed = this.editors.getByKey(column.getItemId());
+ Ext.destroy(ed, column.field);
+ this.editors.removeAtKey(column.getItemId());
+ this.callParent(arguments);
+ },
- /**
- * Get the cell (td) for a particular record and column.
+ /**
+ * Gets the cell (td) for a particular record and column.
* @param {Ext.data.Model} record
- * @param {Ext.grid.column.Colunm} column
+ * @param {Ext.grid.column.Column} column
* @private
*/
getCell: function(record, column) {
@@ -316,27 +343,40 @@ grid.on('validateedit', function(e) {
var me = this,
grid = me.grid,
sm = grid.getSelectionModel(),
- dataIndex = me.getActiveColumn().dataIndex;
-
- me.setActiveEditor(null);
- me.setActiveColumn(null);
- me.setActiveRecord(null);
- delete sm.wasEditing;
-
- if (!me.validateEdit()) {
- return;
+ activeColumn = me.getActiveColumn(),
+ dataIndex;
+
+ if (activeColumn) {
+ dataIndex = activeColumn.dataIndex;
+
+ me.setActiveEditor(null);
+ me.setActiveColumn(null);
+ me.setActiveRecord(null);
+ delete sm.wasEditing;
+
+ if (!me.validateEdit()) {
+ return;
+ }
+ // Only update the record if the new value is different than the
+ // startValue, when the view refreshes its el will gain focus
+ if (value !== startValue) {
+ me.context.record.set(dataIndex, value);
+ // Restore focus back to the view's element.
+ } else {
+ grid.getView().getEl(activeColumn).focus();
+ }
+ me.context.value = value;
+ me.fireEvent('edit', me, me.context);
}
- me.context.record.set(dataIndex, value);
- me.fireEvent('edit', me, me.context);
},
- /**
- * Cancel any active editing.
+ /**
+ * Cancels any active editing.
*/
cancelEdit: function() {
var me = this,
activeEd = me.getActiveEditor(),
- viewEl = me.grid.getView().el;
+ viewEl = me.grid.getView().getEl(me.getActiveColumn());
me.setActiveEditor(null);
me.setActiveColumn(null);
@@ -347,7 +387,7 @@ grid.on('validateedit', function(e) {
}
},
- /**
+ /**
* Starts editing by position (row/column)
* @param {Object} position A position with keys of row and column.
*/
@@ -363,4 +403,6 @@ grid.on('validateedit', function(e) {
}
me.startEdit(editRecord, editColumnHeader);
}
-});