/**
- * @class Ext.grid.plugin.RowEditing
- * @extends Ext.grid.plugin.Editing
- *
- * The Ext.grid.plugin.RowEditing plugin injects editing at a row level for a Grid. When editing begins,
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * The Ext.grid.plugin.RowEditing plugin injects editing at a row level for a Grid. When editing begins,
* a small floating dialog will be shown for the appropriate row. Each editable column will show a field
* for editing. There is a button to save or cancel all changes for the edit.
- *
+ *
* 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 column won't be editable and the value of
* the column will be displayed.
*
* The editor may be shared for each column in the grid, or a different one may be specified for each column.
* 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.RowEditing/Ext.grid.plugin.RowEditing.png Ext.grid.plugin.RowEditing plugin}
- *
- * ## Example Usage
*
+ * @example
* Ext.create('Ext.data.Store', {
* storeId:'simpsonsStore',
* fields:['name', 'email', 'phone'],
- * data:{'items':[
+ * data: [
* {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
* {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
- * {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
- * {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
- * ]},
- * proxy: {
- * type: 'memory',
- * reader: {
- * type: 'json',
- * root: 'items'
- * }
- * }
+ * {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
+ * {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
+ * ]
* });
- *
+ *
* Ext.create('Ext.grid.Panel', {
* title: 'Simpsons',
* store: Ext.data.StoreManager.lookup('simpsonsStore'),
* columns: [
- * {header: 'Name', dataIndex: 'name', field: 'textfield'},
- * {header: 'Email', dataIndex: 'email', flex:1,
+ * {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'}
@@ -71,102 +75,101 @@ Ext.define('Ext.grid.plugin.RowEditing', {
editStyle: 'row',
- /**
+ /**
* @cfg {Boolean} autoCancel
- * `true` to automatically cancel any pending changes when the row editor begins editing a new row.
- * `false` to force the user to explicitly cancel the pending changes. Defaults to `true`.
- * @markdown
+ * True to automatically cancel any pending changes when the row editor begins editing a new row.
+ * False to force the user to explicitly cancel the pending changes. Defaults to true.
*/
autoCancel: true,
- /**
+ /**
* @cfg {Number} clicksToMoveEditor
* The number of clicks to move the row editor to a new row while it is visible and actively editing another row.
* This will default to the same value as {@link Ext.grid.plugin.Editing#clicksToEdit clicksToEdit}.
- * @markdown
*/
- /**
+ /**
* @cfg {Boolean} errorSummary
- * `true` to show a {@link Ext.tip.ToolTip tooltip} that summarizes all validation errors present
- * in the row editor. Set to `false` to prevent the tooltip from showing. Defaults to `true`.
- * @markdown
+ * True to show a {@link Ext.tip.ToolTip tooltip} that summarizes all validation errors present
+ * in the row editor. Set to false to prevent the tooltip from showing. Defaults to true.
*/
errorSummary: true,
- /**
+ /**
* @event beforeedit
- * Fires before row editing is triggered. The edit event object has the following properties <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>grid - The grid this editor is on</li>
- * <li>view - The grid view</li>
- * <li>store - The grid store</li>
- * <li>record - The record being edited</li>
- * <li>row - The grid table row</li>
- * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit</li>
- * <li>rowIdx - The row index that is being edited</li>
- * <li>colIdx - The column index that initiated the edit</li>
- * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
- * </ul>
+ * Fires before row editing is triggered.
+ *
* @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 this editor is on
+ * - view - The grid view
+ * - store - The grid store
+ * - record - The record being edited
+ * - row - The grid table row
+ * - column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit
+ * - rowIdx - The row index that is being edited
+ * - colIdx - The column index that initiated the edit
+ * - cancel - Set this to true to cancel the edit or return false from your handler.
+ */
+
+ /**
+ * @event canceledit
+ * Fires when the user has started editing a row but then cancelled the edit
+ * @param {Object} grid The grid
*/
- /**
+
+ /**
* @event edit
- * Fires after a row is edited. The edit event object has the following properties <br />
- * <ul style="padding:5px;padding-left:16px;">
- * <li>grid - The grid this editor is on</li>
- * <li>view - The grid view</li>
- * <li>store - The grid store</li>
- * <li>record - The record being edited</li>
- * <li>row - The grid table row</li>
- * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit</li>
- * <li>rowIdx - The row index that is being edited</li>
- * <li>colIdx - The column index that initiated the edit</li>
- * </ul>
+ * Fires after a row 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 this editor is on
+ * - view - The grid view
+ * - store - The grid store
+ * - record - The record being edited
+ * - row - The grid table row
+ * - column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit
+ * - rowIdx - The row index that is being edited
+ * - colIdx - The column index that initiated the edit
*/
- /**
+ /**
* @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 this editor is on</li>
- * <li>view - The grid view</li>
- * <li>store - The grid store</li>
- * <li>record - The record being edited</li>
- * <li>row - The grid table row</li>
- * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit</li>
- * <li>rowIdx - The row index that is being edited</li>
- * <li>colIdx - The column index that initiated the edit</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.rowIdx == 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 to cancel the change. The
+ * edit event object has the following properties
+ *
+ * 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.rowIdx == 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 this editor is on
+ * - view - The grid view
+ * - store - The grid store
+ * - record - The record being edited
+ * - row - The grid table row
+ * - column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit
+ * - rowIdx - The row index that is being edited
+ * - colIdx - The column index that initiated the edit
+ * - cancel - Set this to true to cancel the edit or return false from your handler.
*/
constructor: function() {
@@ -180,7 +183,7 @@ grid.on('validateedit', function(e) {
me.autoCancel = !!me.autoCancel;
},
- /**
+ /**
* @private
* AbstractComponent calls destroy on all its plugins at destroy time.
*/
@@ -190,11 +193,10 @@ grid.on('validateedit', function(e) {
me.callParent(arguments);
},
- /**
- * 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,
@@ -217,6 +219,8 @@ grid.on('validateedit', function(e) {
if (me.editing) {
me.getEditor().cancelEdit();
me.callParent(arguments);
+
+ me.fireEvent('canceledit', me.context);
}
},
@@ -232,7 +236,26 @@ grid.on('validateedit', function(e) {
// private
validateEdit: function() {
- var me = this;
+ var me = this,
+ editor = me.editor,
+ context = me.context,
+ record = context.record,
+ newValues = {},
+ originalValues = {},
+ name;
+
+ editor.items.each(function(item) {
+ name = item.name;
+
+ newValues[name] = item.getValue();
+ originalValues[name] = record.get(name);
+ });
+
+ Ext.apply(context, {
+ newValues : newValues,
+ originalValues : originalValues
+ });
+
return me.callParent(arguments) && me.getEditor().completeEdit();
},
@@ -309,38 +332,47 @@ grid.on('validateedit', function(e) {
// private
onColumnAdd: function(ct, column) {
- var me = this,
+ if (column.isHeader) {
+ var me = this,
+ editor;
+
+ me.initFieldAccessors(column);
editor = me.getEditor();
- me.initFieldAccessors(column);
- if (editor && editor.onColumnAdd) {
- editor.onColumnAdd(column);
+ if (editor && editor.onColumnAdd) {
+ editor.onColumnAdd(column);
+ }
}
},
// private
onColumnRemove: function(ct, column) {
- var me = this,
- editor = me.getEditor();
-
- if (editor && editor.onColumnRemove) {
- editor.onColumnRemove(column);
+ if (column.isHeader) {
+ var me = this,
+ editor = me.getEditor();
+
+ if (editor && editor.onColumnRemove) {
+ editor.onColumnRemove(column);
+ }
+ me.removeFieldAccessors(column);
}
- me.removeFieldAccessors(column);
},
// private
onColumnResize: function(ct, column, width) {
- var me = this,
- editor = me.getEditor();
+ if (column.isHeader) {
+ var me = this,
+ editor = me.getEditor();
- if (editor && editor.onColumnResize) {
- editor.onColumnResize(column, width);
+ if (editor && editor.onColumnResize) {
+ editor.onColumnResize(column, width);
+ }
}
},
// private
onColumnHide: function(ct, column) {
+ // no isHeader check here since its already a columnhide event.
var me = this,
editor = me.getEditor();
@@ -351,6 +383,7 @@ grid.on('validateedit', function(e) {
// private
onColumnShow: function(ct, column) {
+ // no isHeader check here since its already a columnshow event.
var me = this,
editor = me.getEditor();
@@ -361,6 +394,7 @@ grid.on('validateedit', function(e) {
// private
onColumnMove: function(ct, column, fromIdx, toIdx) {
+ // no isHeader check here since its already a columnmove event.
var me = this,
editor = me.getEditor();
@@ -375,4 +409,7 @@ grid.on('validateedit', function(e) {
me.callParent(arguments);
me.getEditor().setField(column.field, column);
}
-});