2 * @class Ext.grid.plugin.RowEditing
3 * @extends Ext.grid.plugin.Editing
5 * The Ext.grid.plugin.RowEditing plugin injects editing at a row level for a Grid. When editing begins,
6 * a small floating dialog will be shown for the appropriate row. Each editable column will show a field
7 * for editing. There is a button to save or cancel all changes for the edit.
9 * The field that will be used for the editor is defined at the
10 * {@link Ext.grid.column.Column#field field}. The editor can be a field instance or a field configuration.
11 * If an editor is not specified for a particular column then that column won't be editable and the value of
12 * the column will be displayed.
14 * The editor may be shared for each column in the grid, or a different one may be specified for each column.
15 * An appropriate field type should be chosen to match the data structure that it will be editing. For example,
16 * to edit a date, it would be useful to specify {@link Ext.form.field.Date} as the editor.
18 * {@img Ext.grid.plugin.RowEditing/Ext.grid.plugin.RowEditing.png Ext.grid.plugin.RowEditing plugin}
22 * Ext.create('Ext.data.Store', {
23 * storeId:'simpsonsStore',
24 * fields:['name', 'email', 'phone'],
26 * {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
27 * {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
28 * {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
29 * {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
40 * Ext.create('Ext.grid.Panel', {
42 * store: Ext.data.StoreManager.lookup('simpsonsStore'),
44 * {header: 'Name', dataIndex: 'name', field: 'textfield'},
45 * {header: 'Email', dataIndex: 'email', flex:1,
51 * {header: 'Phone', dataIndex: 'phone'}
53 * selType: 'rowmodel',
55 * Ext.create('Ext.grid.plugin.RowEditing', {
61 * renderTo: Ext.getBody()
64 Ext.define('Ext.grid.plugin.RowEditing', {
65 extend: 'Ext.grid.plugin.Editing',
66 alias: 'plugin.rowediting',
75 * @cfg {Boolean} autoCancel
76 * `true` to automatically cancel any pending changes when the row editor begins editing a new row.
77 * `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}.
90 * @cfg {Boolean} errorSummary
91 * `true` to show a {@link Ext.tip.ToolTip tooltip} that summarizes all validation errors present
92 * in the row editor. Set to `false` to prevent the tooltip from showing. Defaults to `true`.
99 * Fires before row editing is triggered. The edit event object has the following properties <br />
100 * <ul style="padding:5px;padding-left:16px;">
101 * <li>grid - The grid this editor is on</li>
102 * <li>view - The grid view</li>
103 * <li>store - The grid store</li>
104 * <li>record - The record being edited</li>
105 * <li>row - The grid table row</li>
106 * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit</li>
107 * <li>rowIdx - The row index that is being edited</li>
108 * <li>colIdx - The column index that initiated the edit</li>
109 * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
111 * @param {Ext.grid.plugin.Editing} editor
112 * @param {Object} e An edit event (see above for description)
116 * Fires after a row is edited. The edit event object has the following properties <br />
117 * <ul style="padding:5px;padding-left:16px;">
118 * <li>grid - The grid this editor is on</li>
119 * <li>view - The grid view</li>
120 * <li>store - The grid store</li>
121 * <li>record - The record being edited</li>
122 * <li>row - The grid table row</li>
123 * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit</li>
124 * <li>rowIdx - The row index that is being edited</li>
125 * <li>colIdx - The column index that initiated the edit</li>
129 grid.on('edit', onEdit, this);
132 // execute an XHR to send/commit data to the server, in callback do (if successful):
136 * @param {Ext.grid.plugin.Editing} editor
137 * @param {Object} e An edit event (see above for description)
140 * @event validateedit
141 * Fires after a cell is edited, but before the value is set in the record. Return false
142 * to cancel the change. The edit event object has the following properties <br />
143 * <ul style="padding:5px;padding-left:16px;">
144 * <li>grid - The grid this editor is on</li>
145 * <li>view - The grid view</li>
146 * <li>store - The grid store</li>
147 * <li>record - The record being edited</li>
148 * <li>row - The grid table row</li>
149 * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit</li>
150 * <li>rowIdx - The row index that is being edited</li>
151 * <li>colIdx - The column index that initiated the edit</li>
152 * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
154 * Usage example showing how to remove the red triangle (dirty record indicator) from some
155 * records (not all). By observing the grid's validateedit event, it can be cancelled if
156 * the edit occurs on a targeted row (for example) and then setting the field's new value
157 * in the Record directly:
159 grid.on('validateedit', function(e) {
162 if (e.rowIdx == myTargetRow) {
164 e.record.data[e.field] = e.value;
168 * @param {Ext.grid.plugin.Editing} editor
169 * @param {Object} e An edit event (see above for description)
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 * Start editing the specified record, using the specified Column definition to define which field is being edited.
195 * @param {Model} record The Store data record which backs the row to be edited.
196 * @param {Model} columnHeader The Column object defining the column to be edited.
199 startEdit: function(record, columnHeader) {
201 editor = me.getEditor();
203 if (me.callParent(arguments) === false) {
207 // Fire off our editor
208 if (editor.beforeEdit() !== false) {
209 editor.startEdit(me.context.record, me.context.column);
214 cancelEdit: function() {
218 me.getEditor().cancelEdit();
219 me.callParent(arguments);
224 completeEdit: function() {
227 if (me.editing && me.validateEdit()) {
229 me.fireEvent('edit', me.context);
234 validateEdit: function() {
236 return me.callParent(arguments) && me.getEditor().completeEdit();
240 getEditor: function() {
244 me.editor = me.initEditor();
250 initEditor: function() {
254 headerCt = grid.headerCt;
256 return Ext.create('Ext.grid.RowEditor', {
257 autoCancel: me.autoCancel,
258 errorSummary: me.errorSummary,
259 fields: headerCt.getGridColumns(),
262 // keep a reference..
269 initEditTriggers: function() {
273 headerCt = grid.headerCt,
274 moveEditorEvent = me.clicksToMoveEditor === 1 ? 'click' : 'dblclick';
276 me.callParent(arguments);
278 if (me.clicksToMoveEditor !== me.clicksToEdit) {
279 me.mon(view, 'cell' + moveEditorEvent, me.moveEditorByClick, me);
282 view.on('render', function() {
286 remove: me.onColumnRemove,
287 columnresize: me.onColumnResize,
288 columnhide: me.onColumnHide,
289 columnshow: me.onColumnShow,
290 columnmove: me.onColumnMove,
293 }, me, { single: true });
296 startEditByClick: function() {
298 if (!me.editing || me.clicksToMoveEditor === me.clicksToEdit) {
299 me.callParent(arguments);
303 moveEditorByClick: function() {
306 me.superclass.startEditByClick.apply(me, arguments);
311 onColumnAdd: function(ct, column) {
312 if (column.isHeader) {
316 me.initFieldAccessors(column);
317 editor = me.getEditor();
319 if (editor && editor.onColumnAdd) {
320 editor.onColumnAdd(column);
326 onColumnRemove: function(ct, column) {
327 if (column.isHeader) {
329 editor = me.getEditor();
331 if (editor && editor.onColumnRemove) {
332 editor.onColumnRemove(column);
334 me.removeFieldAccessors(column);
339 onColumnResize: function(ct, column, width) {
340 if (column.isHeader) {
342 editor = me.getEditor();
344 if (editor && editor.onColumnResize) {
345 editor.onColumnResize(column, width);
351 onColumnHide: function(ct, column) {
352 // no isHeader check here since its already a columnhide event.
354 editor = me.getEditor();
356 if (editor && editor.onColumnHide) {
357 editor.onColumnHide(column);
362 onColumnShow: function(ct, column) {
363 // no isHeader check here since its already a columnshow event.
365 editor = me.getEditor();
367 if (editor && editor.onColumnShow) {
368 editor.onColumnShow(column);
373 onColumnMove: function(ct, column, fromIdx, toIdx) {
374 // no isHeader check here since its already a columnmove event.
376 editor = me.getEditor();
378 if (editor && editor.onColumnMove) {
379 editor.onColumnMove(column, fromIdx, toIdx);
384 setColumnField: function(column, field) {
386 me.callParent(arguments);
387 me.getEditor().setField(column.field, column);