1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre>
2 <span id='Ext-grid.plugin.Editing'>/**
3 </span> * @class Ext.grid.plugin.Editing
5 This class provides an abstract grid editing plugin on selected {@link Ext.grid.column.Column columns}.
6 The editable columns are specified by providing an {@link Ext.grid.column.Column#editor editor}
7 in the {@link Ext.grid.column.Column column configuration}.
9 *Note:* This class should not be used directly. See {@link Ext.grid.plugin.CellEditing} and
10 {@link Ext.grid.plugin.RowEditing}.
14 Ext.define('Ext.grid.plugin.Editing', {
15 alias: 'editing.editing',
18 'Ext.grid.column.Column',
23 observable: 'Ext.util.Observable'
26 <span id='Ext-grid.plugin.Editing-cfg-clicksToEdit'> /**
27 </span> * @cfg {Number} clicksToEdit
28 * The number of clicks on a grid required to display the editor (defaults to 2).
33 defaultFieldXType: 'textfield',
38 constructor: function(config) {
40 Ext.apply(me, config);
43 // Doc'ed in separate editing plugins
46 // Doc'ed in separate editing plugins
49 // Doc'ed in separate editing plugins
52 me.mixins.observable.constructor.call(me);
53 // TODO: Deprecated, remove in 5.0
54 me.relayEvents(me, ['afteredit'], 'after');
58 init: function(grid) {
64 me.initFieldAccessors(me.view.getGridColumns());
66 grid.relayEvents(me, ['beforeedit', 'edit', 'validateedit']);
67 // Marks the grid as editable, so that the SelectionModel
68 // can make appropriate decisions during navigation
69 grid.isEditable = true;
70 grid.editingPlugin = grid.view.editingPlugin = me;
73 <span id='Ext-grid.plugin.Editing-method-destroy'> /**
75 * AbstractComponent calls destroy on all its plugins at destroy time.
80 headerCt = grid.headerCt,
83 Ext.destroy(me.keyNav);
84 me.removeFieldAccessors(grid.getView().getGridColumns());
86 // Clear all listeners from all our events, clear all managed listeners we added to other Observables
89 delete me.grid.editingPlugin;
90 delete me.grid.view.editingPlugin;
98 getEditStyle: function() {
99 return this.editStyle;
103 initFieldAccessors: function(column) {
106 if (Ext.isArray(column)) {
107 Ext.Array.forEach(column, me.initFieldAccessors, me);
111 // Augment the Header class to have a getEditor and setEditor method
112 // Important: Only if the header does not have its own implementation.
113 Ext.applyIf(column, {
114 getEditor: function(record, defaultField) {
115 return me.getColumnField(this, defaultField);
118 setEditor: function(field) {
119 me.setColumnField(this, field);
125 removeFieldAccessors: function(column) {
128 if (Ext.isArray(column)) {
129 Ext.Array.forEach(column, me.removeFieldAccessors, me);
133 delete column.getEditor;
134 delete column.setEditor;
138 // remaps to the public API of Ext.grid.column.Column.getEditor
139 getColumnField: function(columnHeader, defaultField) {
140 var field = columnHeader.field;
142 if (!field && columnHeader.editor) {
143 field = columnHeader.editor;
144 delete columnHeader.editor;
147 if (!field && defaultField) {
148 field = defaultField;
152 if (Ext.isString(field)) {
153 field = { xtype: field };
155 if (Ext.isObject(field) && !field.isFormField) {
156 field = Ext.ComponentManager.create(field, this.defaultFieldXType);
157 columnHeader.field = field;
161 name: columnHeader.dataIndex
169 // remaps to the public API of Ext.grid.column.Column.setEditor
170 setColumnField: function(column, field) {
171 if (Ext.isObject(field) && !field.isFormField) {
172 field = Ext.ComponentManager.create(field, this.defaultFieldXType);
174 column.field = field;
178 initEvents: function() {
180 me.initEditTriggers();
181 me.initCancelTriggers();
185 initCancelTriggers: Ext.emptyFn,
188 initEditTriggers: function() {
191 clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick';
194 me.mon(view, 'cell' + clickEvent, me.startEditByClick, me);
195 view.on('render', function() {
196 me.keyNav = Ext.create('Ext.util.KeyNav', view.el, {
197 enter: me.onEnterKey,
201 }, me, { single: true });
205 onEnterKey: function(e) {
208 selModel = grid.getSelectionModel(),
210 columnHeader = grid.headerCt.getHeaderAtIndex(0);
212 // Calculate editing start position from SelectionModel
213 // CellSelectionModel
214 if (selModel.getCurrentPosition) {
215 pos = selModel.getCurrentPosition();
216 record = grid.store.getAt(pos.row);
217 columnHeader = grid.headerCt.getHeaderAtIndex(pos.column);
221 record = selModel.getLastSelected();
223 me.startEdit(record, columnHeader);
227 onEscKey: function(e) {
232 startEditByClick: function(view, cell, colIdx, record, row, rowIdx, e) {
233 this.startEdit(record, view.getHeaderAtIndex(colIdx));
236 <span id='Ext-grid.plugin.Editing-property-beforeEdit'> /**
238 * @abstract. Template method called before editing begins.
239 * @param {Object} context The current editing context
240 * @return {Boolean} Return false to cancel the editing process
242 beforeEdit: Ext.emptyFn,
244 <span id='Ext-grid.plugin.Editing-method-startEdit'> /**
245 </span> * Start editing the specified record, using the specified Column definition to define which field is being edited.
246 * @param {Model} record The Store data record which backs the row to be edited.
247 * @param {Model} columnHeader The Column object defining the column to be edited.
249 startEdit: function(record, columnHeader) {
251 context = me.getEditingContext(record, columnHeader);
253 if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', context) === false || context.cancel) {
257 me.context = context;
261 <span id='Ext-grid.plugin.Editing-method-getEditingContext'> /**
262 </span> * @private Collects all information necessary for any subclasses to perform their editing functions.
264 * @param columnHeader
265 * @returns {Object} The editing context based upon the passed record and column
267 getEditingContext: function(record, columnHeader) {
273 view = grid.getView(),
276 // If they'd passed numeric row, column indices, look them up.
277 if (Ext.isNumber(record)) {
279 record = store.getAt(rowIdx);
281 rowIdx = store.indexOf(record);
283 if (Ext.isNumber(columnHeader)) {
284 colIdx = columnHeader;
285 columnHeader = grid.headerCt.getHeaderAtIndex(colIdx);
287 colIdx = columnHeader.getIndex();
290 value = record.get(columnHeader.dataIndex);
294 field: columnHeader.dataIndex,
296 row: view.getNode(rowIdx),
297 column: columnHeader,
303 <span id='Ext-grid.plugin.Editing-method-cancelEdit'> /**
304 </span> * Cancel any active edit that is in progress.
306 cancelEdit: function() {
307 this.editing = false;
310 <span id='Ext-grid.plugin.Editing-method-completeEdit'> /**
311 </span> * Complete the edit if there is an active edit in progress.
313 completeEdit: function() {
316 if (me.editing && me.validateEdit()) {
317 me.fireEvent('edit', me.context);
325 validateEdit: function() {
327 context = me.context;
329 return me.fireEvent('validateedit', me, context) !== false && !context.cancel;
331 });</pre></pre></body></html>