Editing.html
21.4 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
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
<!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-Editing'>/**
</span> * This class provides an abstract grid editing plugin on selected {@link Ext.grid.column.Column columns}.
* The editable columns are specified by providing an {@link Ext.grid.column.Column#editor editor}
* in the {@link Ext.grid.column.Column column configuration}.
*
* **Note:** This class should not be used directly. See {@link Ext.grid.plugin.CellEditing} and
* {@link Ext.grid.plugin.RowEditing}.
*/
Ext.define('Ext.grid.plugin.Editing', {
alias: 'editing.editing',
extend: 'Ext.AbstractPlugin',
requires: [
'Ext.grid.column.Column',
'Ext.util.KeyNav'
],
mixins: {
observable: 'Ext.util.Observable'
},
<span id='Ext-grid-plugin-Editing-cfg-clicksToEdit'> /**
</span> * @cfg {Number} clicksToEdit
* The number of clicks on a grid required to display the editor.
* The only accepted values are **1** and **2**.
*/
clicksToEdit: 2,
<span id='Ext-grid-plugin-Editing-cfg-triggerEvent'> /**
</span> * @cfg {String} triggerEvent
* The event which triggers editing. Supercedes the {@link #clicksToEdit} configuration. Maybe one of:
*
* * cellclick
* * celldblclick
* * cellfocus
* * rowfocus
*/
triggerEvent: undefined,
// private
defaultFieldXType: 'textfield',
// cell, row, form
editStyle: '',
constructor: function(config) {
var me = this;
me.addEvents(
<span id='Ext-grid-plugin-Editing-event-beforeedit'> /**
</span> * @event beforeedit
* Fires before editing is triggered. Return false from event handler to stop the editing.
*
* @param {Ext.grid.plugin.Editing} 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.
* - originalValue - Alias for value (only when using {@link Ext.grid.plugin.CellEditing CellEditing}).
*/
'beforeedit',
<span id='Ext-grid-plugin-Editing-event-edit'> /**
</span> * @event edit
* Fires after a editing. Usage example:
*
* grid.on('edit', function(editor, e) {
* // commit the changes right after editing finished
* e.record.commit();
* });
*
* @param {Ext.grid.plugin.Editing} 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
* - originalValue - The original value for the field, before the edit (only when using {@link Ext.grid.plugin.CellEditing CellEditing})
* - originalValues - The original values for the field, before the edit (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
* - newValues - The new values being set (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
* - view - The grid view (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
* - store - The grid store (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
*/
'edit',
<span id='Ext-grid-plugin-Editing-event-validateedit'> /**
</span> * @event validateedit
* Fires after editing, 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.rowIdx == myTargetRow) {
* e.cancel = true;
* e.record.data[e.field] = e.value;
* }
* });
*
* @param {Ext.grid.plugin.Editing} 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
* - 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.
* - originalValue - The original value for the field, before the edit (only when using {@link Ext.grid.plugin.CellEditing CellEditing})
* - originalValues - The original values for the field, before the edit (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
* - newValues - The new values being set (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
* - view - The grid view (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
* - store - The grid store (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
*/
'validateedit',
<span id='Ext-grid-plugin-Editing-event-canceledit'> /**
</span> * @event canceledit
* Fires when the user started editing but then cancelled the edit.
* @param {Ext.grid.plugin.Editing} 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
* - view - The grid view
* - store - The grid store
*/
'canceledit'
);
me.callParent(arguments);
me.mixins.observable.constructor.call(me);
// TODO: Deprecated, remove in 5.0
me.on("edit", function(editor, e) {
me.fireEvent("afteredit", editor, e);
});
},
// private
init: function(grid) {
var me = this;
me.grid = grid;
me.view = grid.view;
me.initEvents();
me.mon(grid, 'reconfigure', me.onReconfigure, me);
me.onReconfigure();
grid.relayEvents(me, [
<span id='Ext-panel-Table-event-beforeedit'> /**
</span> * @event beforeedit
* Forwarded event from Ext.grid.plugin.Editing.
* @member Ext.panel.Table
* @inheritdoc Ext.grid.plugin.Editing#beforeedit
*/
'beforeedit',
<span id='Ext-panel-Table-event-edit'> /**
</span> * @event edit
* Forwarded event from Ext.grid.plugin.Editing.
* @member Ext.panel.Table
* @inheritdoc Ext.grid.plugin.Editing#edit
*/
'edit',
<span id='Ext-panel-Table-event-validateedit'> /**
</span> * @event validateedit
* Forwarded event from Ext.grid.plugin.Editing.
* @member Ext.panel.Table
* @inheritdoc Ext.grid.plugin.Editing#validateedit
*/
'validateedit',
<span id='Ext-panel-Table-event-canceledit'> /**
</span> * @event canceledit
* Forwarded event from Ext.grid.plugin.Editing.
* @member Ext.panel.Table
* @inheritdoc Ext.grid.plugin.Editing#canceledit
*/
'canceledit'
]);
// Marks the grid as editable, so that the SelectionModel
// can make appropriate decisions during navigation
grid.isEditable = true;
grid.editingPlugin = grid.view.editingPlugin = me;
},
<span id='Ext-grid-plugin-Editing-method-onReconfigure'> /**
</span> * Fires after the grid is reconfigured
* @private
*/
onReconfigure: function() {
this.initFieldAccessors(this.view.getGridColumns());
},
<span id='Ext-grid-plugin-Editing-method-destroy'> /**
</span> * @private
* AbstractComponent calls destroy on all its plugins at destroy time.
*/
destroy: function() {
var me = this,
grid = me.grid;
Ext.destroy(me.keyNav);
me.removeFieldAccessors(grid.getView().getGridColumns());
// Clear all listeners from all our events, clear all managed listeners we added to other Observables
me.clearListeners();
delete me.grid.editingPlugin;
delete me.grid.view.editingPlugin;
delete me.grid;
delete me.view;
delete me.editor;
delete me.keyNav;
},
// private
getEditStyle: function() {
return this.editStyle;
},
// private
initFieldAccessors: function(columns) {
columns = [].concat(columns);
var me = this,
c,
cLen = columns.length,
column;
for (c = 0; c < cLen; c++) {
column = columns[c];
Ext.applyIf(column, {
getEditor: function(record, defaultField) {
return me.getColumnField(this, defaultField);
},
setEditor: function(field) {
me.setColumnField(this, field);
}
});
}
},
// private
removeFieldAccessors: function(columns) {
columns = [].concat(columns);
var c,
cLen = columns.length,
column;
for (c = 0; c < cLen; c++) {
column = columns[c];
delete column.getEditor;
delete column.setEditor;
}
},
// private
// remaps to the public API of Ext.grid.column.Column.getEditor
getColumnField: function(columnHeader, defaultField) {
var field = columnHeader.field;
if (!field && columnHeader.editor) {
field = columnHeader.editor;
delete columnHeader.editor;
}
if (!field && defaultField) {
field = defaultField;
}
if (field) {
if (Ext.isString(field)) {
field = { xtype: field };
}
if (!field.isFormField) {
field = Ext.ComponentManager.create(field, this.defaultFieldXType);
}
columnHeader.field = field;
Ext.apply(field, {
name: columnHeader.dataIndex
});
return field;
}
},
// private
// remaps to the public API of Ext.grid.column.Column.setEditor
setColumnField: function(column, field) {
if (Ext.isObject(field) && !field.isFormField) {
field = Ext.ComponentManager.create(field, this.defaultFieldXType);
}
column.field = field;
},
// private
initEvents: function() {
var me = this;
me.initEditTriggers();
me.initCancelTriggers();
},
// @abstract
initCancelTriggers: Ext.emptyFn,
// private
initEditTriggers: function() {
var me = this,
view = me.view;
// Listen for the edit trigger event.
if (me.triggerEvent == 'cellfocus') {
me.mon(view, 'cellfocus', me.onCellFocus, me);
} else if (me.triggerEvent == 'rowfocus') {
me.mon(view, 'rowfocus', me.onRowFocus, me);
} else {
// Prevent the View from processing when the SelectionModel focuses.
// This is because the SelectionModel processes the mousedown event, and
// focusing causes a scroll which means that the subsequent mouseup might
// take place at a different document XY position, and will therefore
// not trigger a click.
// This Editor must call the View's focusCell method directly when we recieve a request to edit
if (view.selModel.isCellModel) {
view.onCellFocus = Ext.Function.bind(me.beforeViewCellFocus, me);
}
// Listen for whichever click event we are configured to use
me.mon(view, me.triggerEvent || ('cell' + (me.clicksToEdit === 1 ? 'click' : 'dblclick')), me.onCellClick, me);
}
// add/remove header event listeners need to be added immediately because
// columns can be added/removed before render
me.initAddRemoveHeaderEvents()
// wait until render to initialize keynav events since they are attached to an element
view.on('render', me.initKeyNavHeaderEvents, me, {single: true});
},
// Override of View's method so that we can pre-empt the View's processing if the view is being triggered by a mousedown
beforeViewCellFocus: function(position) {
// Pass call on to view if the navigation is from the keyboard, or we are not going to edit this cell.
if (this.view.selModel.keyNavigation || !this.editing || !this.isCellEditable || !this.isCellEditable(position.row, position.columnHeader)) {
this.view.focusCell.apply(this.view, arguments);
}
},
// private. Used if we are triggered by the rowfocus event
onRowFocus: function(record, row, rowIdx) {
this.startEdit(row, 0);
},
// private. Used if we are triggered by the cellfocus event
onCellFocus: function(record, cell, position) {
this.startEdit(position.row, position.column);
},
// private. Used if we are triggered by a cellclick event
onCellClick: function(view, cell, colIdx, record, row, rowIdx, e) {
// cancel editing if the element that was clicked was a tree expander
if(!view.expanderSelector || !e.getTarget(view.expanderSelector)) {
this.startEdit(record, view.getHeaderAtIndex(colIdx));
}
},
initAddRemoveHeaderEvents: function(){
var me = this;
me.mon(me.grid.headerCt, {
scope: me,
add: me.onColumnAdd,
remove: me.onColumnRemove
});
},
initKeyNavHeaderEvents: function() {
var me = this;
me.keyNav = Ext.create('Ext.util.KeyNav', me.view.el, {
enter: me.onEnterKey,
esc: me.onEscKey,
scope: me
});
},
// private
onColumnAdd: function(ct, column) {
if (column.isHeader) {
this.initFieldAccessors(column);
}
},
// private
onColumnRemove: function(ct, column) {
if (column.isHeader) {
this.removeFieldAccessors(column);
}
},
// private
onEnterKey: function(e) {
var me = this,
grid = me.grid,
selModel = grid.getSelectionModel(),
record,
pos,
columnHeader = grid.headerCt.getHeaderAtIndex(0);
// Calculate editing start position from SelectionModel
// CellSelectionModel
if (selModel.getCurrentPosition) {
pos = selModel.getCurrentPosition();
if (pos) {
record = grid.store.getAt(pos.row);
columnHeader = grid.headerCt.getHeaderAtIndex(pos.column);
}
}
// RowSelectionModel
else {
record = selModel.getLastSelected();
}
// If there was a selection to provide a starting context...
if (record && columnHeader) {
me.startEdit(record, columnHeader);
}
},
// private
onEscKey: function(e) {
this.cancelEdit();
},
<span id='Ext-grid-plugin-Editing-method-beforeEdit'> /**
</span> * @private
* @template
* Template method called before editing begins.
* @param {Object} context The current editing context
* @return {Boolean} Return false to cancel the editing process
*/
beforeEdit: Ext.emptyFn,
<span id='Ext-grid-plugin-Editing-method-startEdit'> /**
</span> * Starts editing the specified record, using the specified Column definition to define which field is being edited.
* @param {Ext.data.Model/Number} record The Store data record which backs the row to be edited, or index of the record in Store.
* @param {Ext.grid.column.Column/Number} columnHeader The Column object defining the column to be edited, or index of the column.
*/
startEdit: function(record, columnHeader) {
var me = this,
context = me.getEditingContext(record, columnHeader);
if (context == null || me.beforeEdit(context) === false || me.fireEvent('beforeedit', me, context) === false || context.cancel || !me.grid.view.isVisible(true)) {
return false;
}
me.context = context;
<span id='Ext-grid-plugin-Editing-property-editing'> /**
</span> * @property {Boolean} editing
* Set to `true` while the editing plugin is active and an Editor is visible.
*/
me.editing = true;
},
// TODO: Have this use a new class Ext.grid.CellContext for use here, and in CellSelectionModel
<span id='Ext-grid-plugin-Editing-method-getEditingContext'> /**
</span> * @private
* Collects all information necessary for any subclasses to perform their editing functions.
* @param record
* @param columnHeader
* @returns {Object/undefined} The editing context based upon the passed record and column
*/
getEditingContext: function(record, columnHeader) {
var me = this,
grid = me.grid,
view = grid.getView(),
node = view.getNode(record),
rowIdx, colIdx;
// An intervening listener may have deleted the Record
if (!node) {
return;
}
// Coerce the column index to the closest visible column
columnHeader = grid.headerCt.getVisibleHeaderClosestToIndex(Ext.isNumber(columnHeader) ? columnHeader : columnHeader.getIndex());
// No corresponding column. Possible if all columns have been moved to the other side of a lockable grid pair
if (!columnHeader) {
return;
}
colIdx = columnHeader.getIndex();
if (Ext.isNumber(record)) {
// look up record if numeric row index was passed
rowIdx = record;
record = view.getRecord(node);
} else {
rowIdx = view.indexOf(node);
}
return {
grid : grid,
record : record,
field : columnHeader.dataIndex,
value : record.get(columnHeader.dataIndex),
row : view.getNode(rowIdx),
column : columnHeader,
rowIdx : rowIdx,
colIdx : colIdx
};
},
<span id='Ext-grid-plugin-Editing-method-cancelEdit'> /**
</span> * Cancels any active edit that is in progress.
*/
cancelEdit: function() {
var me = this;
me.editing = false;
me.fireEvent('canceledit', me, me.context);
},
<span id='Ext-grid-plugin-Editing-method-completeEdit'> /**
</span> * Completes the edit if there is an active edit in progress.
*/
completeEdit: function() {
var me = this;
if (me.editing && me.validateEdit()) {
me.fireEvent('edit', me, me.context);
}
delete me.context;
me.editing = false;
},
// @abstract
validateEdit: function() {
var me = this,
context = me.context;
return me.fireEvent('validateedit', me, context) !== false && !context.cancel;
}
});
</pre>
</body>
</html>