CellEditing.html
18.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-grid-plugin-CellEditing'>/**
</span> * 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#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.
*
* 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.
*
* ## Example
*
* A grid with editor for the name and the email columns:
*
* @example
* Ext.create('Ext.data.Store', {
* storeId:'simpsonsStore',
* fields:['name', 'email', 'phone'],
* data:{'items':[
* {"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'
* }
* }
* });
*
* Ext.create('Ext.grid.Panel', {
* title: 'Simpsons',
* store: Ext.data.StoreManager.lookup('simpsonsStore'),
* columns: [
* {header: 'Name', dataIndex: 'name', editor: 'textfield'},
* {header: 'Email', dataIndex: 'email', flex:1,
* editor: {
* xtype: 'textfield',
* allowBlank: false
* }
* },
* {header: 'Phone', dataIndex: 'phone'}
* ],
* selType: 'cellmodel',
* plugins: [
* Ext.create('Ext.grid.plugin.CellEditing', {
* clicksToEdit: 1
* })
* ],
* height: 200,
* width: 400,
* renderTo: Ext.getBody()
* });
*
* This requires a little explanation. We're passing in `store` and `columns` as normal, but
* we also specify a {@link Ext.grid.column.Column#field field} on two of our columns. For the
* Name column we just want a default textfield to edit the value, so we specify 'textfield'.
* For the Email column we customized the editor slightly by passing allowBlank: false, which
* will provide inline validation.
*
* To support cell editing, we also specified that the grid should use the 'cellmodel'
* {@link Ext.grid.Panel#selType selType}, and created an instance of the CellEditing plugin,
* which we configured to activate each editor after a single click.
*
*/
Ext.define('Ext.grid.plugin.CellEditing', {
alias: 'plugin.cellediting',
extend: 'Ext.grid.plugin.Editing',
requires: ['Ext.grid.CellEditor', 'Ext.util.DelayedTask'],
constructor: function() {
<span id='Ext-grid-plugin-CellEditing-event-beforeedit'> /**
</span> * @event beforeedit
* Fires before cell editing is triggered. Return false from event handler to stop the editing.
*
* @param {Ext.grid.plugin.CellEditing} editor
* @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.
*/
<span id='Ext-grid-plugin-CellEditing-event-edit'> /**
</span> * @event edit
* Fires after a cell is edited. Usage example:
*
* grid.on('edit', function(editor, e) {
* // commit the changes right after editing finished
* e.record.commit();
* });
*
* @param {Ext.grid.plugin.CellEditing} editor
* @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
*/
<span id='Ext-grid-plugin-CellEditing-event-validateedit'> /**
</span> * @event validateedit
* 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.CellEditing} editor
* @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.
*/
<span id='Ext-grid-plugin-CellEditing-event-canceledit'> /**
</span> * @event canceledit
* Fires when the user started editing a cell but then cancelled the edit.
* @param {Ext.grid.plugin.CellEditing} editor
* @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
* - 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
*/
this.callParent(arguments);
this.editors = new Ext.util.MixedCollection(false, function(editor) {
return editor.editorId;
});
this.editTask = new Ext.util.DelayedTask();
},
onReconfigure: function(){
this.editors.clear();
this.callParent();
},
<span id='Ext-grid-plugin-CellEditing-method-destroy'> /**
</span> * @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 me = this,
ed = me.getActiveEditor(),
scroll = me.view.el.getScroll();
// Scroll happened during editing...
if (ed && ed.editing) {
// Terminate editing only on vertical scroll. Horiz scroll can be caused by tabbing between cells.
if (scroll.top !== me.scroll.top) {
if (ed.field) {
if (ed.field.triggerBlur) {
ed.field.triggerBlur();
} else {
ed.field.blur();
}
}
}
// Horiz scroll just requires that the editor be realigned.
else {
ed.realign();
}
}
me.scroll = scroll;
},
// private
// Template method called from base class's initEvents
initCancelTriggers: function() {
var me = this,
grid = me.grid,
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,
scope: me
});
},
isCellEditable: function(record, columnHeader) {
var me = this,
context = me.getEditingContext(record, columnHeader);
if (me.grid.view.isVisible(true) && context) {
columnHeader = context.column;
record = context.record;
if (columnHeader && me.getEditor(record, columnHeader)) {
return true;
}
}
},
<span id='Ext-grid-plugin-CellEditing-method-startEdit'> /**
</span> * 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.grid.column.Column} columnHeader The Column object defining the column to be edited.
* @return `true` if editing was started, `false` otherwise.
*/
startEdit: function(record, columnHeader) {
var me = this,
context = me.getEditingContext(record, columnHeader),
value, ed;
// Complete the edit now, before getting the editor's target
// cell DOM element. Completing the edit causes a row refresh.
// Also allows any post-edit events to take effect before continuing
me.completeEdit();
// Cancel editing if EditingContext could not be found (possibly because record has been deleted by an intervening listener), or if the grid view is not currently visible
if (!context || !me.grid.view.isVisible(true)) {
return false;
}
record = context.record;
columnHeader = context.column;
// See if the field is editable for the requested record
if (columnHeader && !columnHeader.getEditor(record)) {
return false;
}
value = record.get(columnHeader.dataIndex);
context.originalValue = context.value = value;
if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', me, context) === false || context.cancel) {
return false;
}
ed = me.getEditor(record, columnHeader);
// Whether we are going to edit or not, ensure the edit cell is scrolled into view
me.grid.view.cancelFocus();
me.view.focusCell({
row: context.rowIdx,
column: context.colIdx
});
if (ed) {
me.editTask.delay(15, me.showEditor, me, [ed, context, value]);
return true;
}
return false;
},
showEditor: function(ed, context, value) {
var me = this,
record = context.record,
columnHeader = context.column,
sm = me.grid.getSelectionModel(),
selection = sm.getCurrentPosition();
me.context = context;
me.setActiveEditor(ed);
me.setActiveRecord(record);
me.setActiveColumn(columnHeader);
// Select cell on edit only if it's not the currently selected cell
if (sm.selectByPosition && (!selection || selection.column !== context.colIdx || selection.row !== context.rowIdx)) {
sm.selectByPosition({
row: context.rowIdx,
column: context.colIdx
});
}
ed.startEdit(me.getCell(record, columnHeader), value);
me.editing = true;
me.scroll = me.view.el.getScroll();
},
completeEdit: function() {
var activeEd = this.getActiveEditor();
if (activeEd) {
activeEd.completeEdit();
this.editing = false;
}
},
// internal getters/setters
setActiveEditor: function(ed) {
this.activeEditor = ed;
},
getActiveEditor: function() {
return this.activeEditor;
},
setActiveColumn: function(column) {
this.activeColumn = column;
},
getActiveColumn: function() {
return this.activeColumn;
},
setActiveRecord: function(record) {
this.activeRecord = record;
},
getActiveRecord: function() {
return this.activeRecord;
},
getEditor: function(record, column) {
var me = this,
editors = me.editors,
editorId = column.getItemId(),
editor = editors.getByKey(editorId);
if (editor) {
return editor;
} else {
editor = column.getEditor(record);
if (!editor) {
return false;
}
// Allow them to specify a CellEditor in the Column
// Either way, the Editor is a floating Component, and must be attached to an ownerCt
// which it uses to traverse upwards to find a ZIndexManager at render time.
if (!(editor instanceof Ext.grid.CellEditor)) {
editor = new Ext.grid.CellEditor({
editorId: editorId,
field: editor,
ownerCt: me.grid
});
} else {
editor.ownerCt = me.grid;
}
editor.editingPlugin = me;
editor.isForTree = me.grid.isTree;
editor.on({
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);
},
<span id='Ext-grid-plugin-CellEditing-method-getCell'> /**
</span> * Gets the cell (td) for a particular record and column.
* @param {Ext.data.Model} record
* @param {Ext.grid.column.Column} column
* @private
*/
getCell: function(record, column) {
return this.grid.getView().getCell(record, column);
},
onSpecialKey: function(ed, field, e) {
var me = this,
grid = me.grid,
sm;
if (e.getKey() === e.TAB) {
e.stopEvent();
if (ed) {
// Allow the field to act on tabs before onEditorTab, which ends
// up calling completeEdit. This is useful for picker type fields.
ed.onEditorTab(e);
}
sm = grid.getSelectionModel();
if (sm.onEditorTab) {
sm.onEditorTab(me, e);
}
}
},
onEditComplete : function(ed, value, startValue) {
var me = this,
grid = me.grid,
activeColumn = me.getActiveColumn(),
sm = grid.getSelectionModel(),
record;
if (activeColumn) {
record = me.context.record;
me.setActiveEditor(null);
me.setActiveColumn(null);
me.setActiveRecord(null);
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 (!record.isEqual(value, startValue)) {
record.set(activeColumn.dataIndex, value);
}
// Restore focus back to the view's element.
if (sm.setCurrentPosition) {
sm.setCurrentPosition(sm.getCurrentPosition());
}
grid.getView().getEl(activeColumn).focus();
me.context.value = value;
me.fireEvent('edit', me, me.context);
}
},
<span id='Ext-grid-plugin-CellEditing-method-cancelEdit'> /**
</span> * Cancels any active editing.
*/
cancelEdit: function() {
var me = this,
activeEd = me.getActiveEditor(),
viewEl = me.grid.getView().getEl(me.getActiveColumn());
me.setActiveEditor(null);
me.setActiveColumn(null);
me.setActiveRecord(null);
if (activeEd) {
activeEd.cancelEdit();
viewEl.focus();
me.callParent(arguments);
}
},
<span id='Ext-grid-plugin-CellEditing-method-startEditByPosition'> /**
</span> * Starts editing by position (row/column)
* @param {Object} position A position with keys of row and column.
*/
startEditByPosition: function(position) {
// Coerce the edit column to the closest visible column
position.column = this.view.getHeaderCt().getVisibleHeaderClosestToIndex(position.column).getIndex();
return this.startEdit(position.row, position.column);
}
});
</pre>
</body>
</html>