X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/source/RowEditing.html?ds=inline diff --git a/docs/source/RowEditing.html b/docs/source/RowEditing.html index ab3b2dbd..7e8928bc 100644 --- a/docs/source/RowEditing.html +++ b/docs/source/RowEditing.html @@ -3,8 +3,8 @@
/** - * @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 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'} @@ -90,9 +77,8 @@ Ext.define('Ext.grid.plugin.RowEditing', { /** * @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, @@ -100,90 +86,90 @@ Ext.define('Ext.grid.plugin.RowEditing', { * @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() { @@ -208,10 +194,9 @@ 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, @@ -234,6 +219,8 @@ grid.on('validateedit', function(e) { if (me.editing) { me.getEditor().cancelEdit(); me.callParent(arguments); + + me.fireEvent('canceledit', me.context); } }, @@ -249,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(); }, @@ -329,10 +335,10 @@ grid.on('validateedit', function(e) { if (column.isHeader) { var me = this, editor; - + me.initFieldAccessors(column); editor = me.getEditor(); - + if (editor && editor.onColumnAdd) { editor.onColumnAdd(column); } @@ -344,11 +350,11 @@ grid.on('validateedit', function(e) { if (column.isHeader) { var me = this, editor = me.getEditor(); - + if (editor && editor.onColumnRemove) { editor.onColumnRemove(column); } - me.removeFieldAccessors(column); + me.removeFieldAccessors(column); } }, @@ -357,7 +363,7 @@ grid.on('validateedit', function(e) { if (column.isHeader) { var me = this, editor = me.getEditor(); - + if (editor && editor.onColumnResize) { editor.onColumnResize(column, width); } @@ -403,6 +409,7 @@ grid.on('validateedit', function(e) { me.callParent(arguments); me.getEditor().setField(column.field, column); } -});+}); +