3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * The Ext.grid.plugin.RowEditing plugin injects editing at a row level for a Grid. When editing begins,
17 * a small floating dialog will be shown for the appropriate row. Each editable column will show a field
18 * for editing. There is a button to save or cancel all changes for the edit.
20 * The field that will be used for the editor is defined at the
21 * {@link Ext.grid.column.Column#editor editor}. The editor can be a field instance or a field configuration.
22 * If an editor is not specified for a particular column then that column won't be editable and the value of
23 * the column will be displayed.
25 * The editor may be shared for each column in the grid, or a different one may be specified for each column.
26 * An appropriate field type should be chosen to match the data structure that it will be editing. For example,
27 * to edit a date, it would be useful to specify {@link Ext.form.field.Date} as the editor.
30 * Ext.create('Ext.data.Store', {
31 * storeId:'simpsonsStore',
32 * fields:['name', 'email', 'phone'],
34 * {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
35 * {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
36 * {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
37 * {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
41 * Ext.create('Ext.grid.Panel', {
43 * store: Ext.data.StoreManager.lookup('simpsonsStore'),
45 * {header: 'Name', dataIndex: 'name', editor: 'textfield'},
46 * {header: 'Email', dataIndex: 'email', flex:1,
52 * {header: 'Phone', dataIndex: 'phone'}
54 * selType: 'rowmodel',
56 * Ext.create('Ext.grid.plugin.RowEditing', {
62 * renderTo: Ext.getBody()
65 Ext.define('Ext.grid.plugin.RowEditing', {
66 extend: 'Ext.grid.plugin.Editing',
67 alias: 'plugin.rowediting',
76 * @cfg {Boolean} autoCancel
77 * True to automatically cancel any pending changes when the row editor begins editing a new row.
78 * False to force the user to explicitly cancel the pending changes. Defaults to true.
83 * @cfg {Number} clicksToMoveEditor
84 * The number of clicks to move the row editor to a new row while it is visible and actively editing another row.
85 * This will default to the same value as {@link Ext.grid.plugin.Editing#clicksToEdit clicksToEdit}.
89 * @cfg {Boolean} errorSummary
90 * True to show a {@link Ext.tip.ToolTip tooltip} that summarizes all validation errors present
91 * in the row editor. Set to false to prevent the tooltip from showing. Defaults to true.
97 * Fires before row editing is triggered.
99 * @param {Ext.grid.plugin.Editing} editor
100 * @param {Object} e An edit event with the following properties:
102 * - grid - The grid this editor is on
103 * - view - The grid view
104 * - store - The grid store
105 * - record - The record being edited
106 * - row - The grid table row
107 * - column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit
108 * - rowIdx - The row index that is being edited
109 * - colIdx - The column index that initiated the edit
110 * - cancel - Set this to true to cancel the edit or return false from your handler.
115 * Fires when the user has started editing a row but then cancelled the edit
116 * @param {Object} grid The grid
121 * Fires after a row is edited. Usage example:
123 * grid.on('edit', function(editor, e) {
124 * // commit the changes right after editing finished
128 * @param {Ext.grid.plugin.Editing} editor
129 * @param {Object} e An edit event with the following properties:
131 * - grid - The grid this editor is on
132 * - view - The grid view
133 * - store - The grid store
134 * - record - The record being edited
135 * - row - The grid table row
136 * - column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit
137 * - rowIdx - The row index that is being edited
138 * - colIdx - The column index that initiated the edit
141 * @event validateedit
142 * Fires after a cell is edited, but before the value is set in the record. Return false to cancel the change. The
143 * edit event object has the following properties
145 * Usage example showing how to remove the red triangle (dirty record indicator) from some records (not all). By
146 * observing the grid's validateedit event, it can be cancelled if the edit occurs on a targeted row (for example)
147 * and then setting the field's new value in the Record directly:
149 * grid.on('validateedit', function(editor, e) {
150 * var myTargetRow = 6;
152 * if (e.rowIdx == myTargetRow) {
154 * e.record.data[e.field] = e.value;
158 * @param {Ext.grid.plugin.Editing} editor
159 * @param {Object} e An edit event with the following properties:
161 * - grid - The grid this editor is on
162 * - view - The grid view
163 * - store - The grid store
164 * - record - The record being edited
165 * - row - The grid table row
166 * - column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit
167 * - rowIdx - The row index that is being edited
168 * - colIdx - The column index that initiated the edit
169 * - cancel - Set this to true to cancel the edit or return false from your handler.
172 constructor: function() {
174 me.callParent(arguments);
176 if (!me.clicksToMoveEditor) {
177 me.clicksToMoveEditor = me.clicksToEdit;
180 me.autoCancel = !!me.autoCancel;
185 * AbstractComponent calls destroy on all its plugins at destroy time.
187 destroy: function() {
189 Ext.destroy(me.editor);
190 me.callParent(arguments);
194 * Starts editing the specified record, using the specified Column definition to define which field is being edited.
195 * @param {Ext.data.Model} record The Store data record which backs the row to be edited.
196 * @param {Ext.data.Model} columnHeader The Column object defining the column to be edited. @override
198 startEdit: function(record, columnHeader) {
200 editor = me.getEditor();
202 if (me.callParent(arguments) === false) {
206 // Fire off our editor
207 if (editor.beforeEdit() !== false) {
208 editor.startEdit(me.context.record, me.context.column);
213 cancelEdit: function() {
217 me.getEditor().cancelEdit();
218 me.callParent(arguments);
220 me.fireEvent('canceledit', me.context);
225 completeEdit: function() {
228 if (me.editing && me.validateEdit()) {
230 me.fireEvent('edit', me.context);
235 validateEdit: function() {
238 context = me.context,
239 record = context.record,
244 editor.items.each(function(item) {
247 newValues[name] = item.getValue();
248 originalValues[name] = record.get(name);
252 newValues : newValues,
253 originalValues : originalValues
256 return me.callParent(arguments) && me.getEditor().completeEdit();
260 getEditor: function() {
264 me.editor = me.initEditor();
270 initEditor: function() {
274 headerCt = grid.headerCt;
276 return Ext.create('Ext.grid.RowEditor', {
277 autoCancel: me.autoCancel,
278 errorSummary: me.errorSummary,
279 fields: headerCt.getGridColumns(),
282 // keep a reference..
289 initEditTriggers: function() {
293 headerCt = grid.headerCt,
294 moveEditorEvent = me.clicksToMoveEditor === 1 ? 'click' : 'dblclick';
296 me.callParent(arguments);
298 if (me.clicksToMoveEditor !== me.clicksToEdit) {
299 me.mon(view, 'cell' + moveEditorEvent, me.moveEditorByClick, me);
302 view.on('render', function() {
306 remove: me.onColumnRemove,
307 columnresize: me.onColumnResize,
308 columnhide: me.onColumnHide,
309 columnshow: me.onColumnShow,
310 columnmove: me.onColumnMove,
313 }, me, { single: true });
316 startEditByClick: function() {
318 if (!me.editing || me.clicksToMoveEditor === me.clicksToEdit) {
319 me.callParent(arguments);
323 moveEditorByClick: function() {
326 me.superclass.startEditByClick.apply(me, arguments);
331 onColumnAdd: function(ct, column) {
332 if (column.isHeader) {
336 me.initFieldAccessors(column);
337 editor = me.getEditor();
339 if (editor && editor.onColumnAdd) {
340 editor.onColumnAdd(column);
346 onColumnRemove: function(ct, column) {
347 if (column.isHeader) {
349 editor = me.getEditor();
351 if (editor && editor.onColumnRemove) {
352 editor.onColumnRemove(column);
354 me.removeFieldAccessors(column);
359 onColumnResize: function(ct, column, width) {
360 if (column.isHeader) {
362 editor = me.getEditor();
364 if (editor && editor.onColumnResize) {
365 editor.onColumnResize(column, width);
371 onColumnHide: function(ct, column) {
372 // no isHeader check here since its already a columnhide event.
374 editor = me.getEditor();
376 if (editor && editor.onColumnHide) {
377 editor.onColumnHide(column);
382 onColumnShow: function(ct, column) {
383 // no isHeader check here since its already a columnshow event.
385 editor = me.getEditor();
387 if (editor && editor.onColumnShow) {
388 editor.onColumnShow(column);
393 onColumnMove: function(ct, column, fromIdx, toIdx) {
394 // no isHeader check here since its already a columnmove event.
396 editor = me.getEditor();
398 if (editor && editor.onColumnMove) {
399 editor.onColumnMove(column, fromIdx, toIdx);
404 setColumnField: function(column, field) {
406 me.callParent(arguments);
407 me.getEditor().setField(column.field, column);