-<!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><span id='Ext-grid.plugin.CellEditing'>/**
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../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> * @class Ext.grid.plugin.CellEditing
* @extends Ext.grid.plugin.Editing
*
requires: ['Ext.grid.CellEditor'],
constructor: function() {
-<span id='Ext-grid.plugin.CellEditing-event-beforeedit'> /**
+<span id='Ext-grid-plugin-CellEditing-event-beforeedit'> /**
</span> * @event beforeedit
* Fires before cell editing is triggered. The edit event object has the following properties <br />
* <ul style="padding:5px;padding-left:16px;">
* @param {Ext.grid.plugin.Editing} editor
* @param {Object} e An edit event (see above for description)
*/
-<span id='Ext-grid.plugin.CellEditing-event-edit'> /**
+<span id='Ext-grid-plugin-CellEditing-event-edit'> /**
</span> * @event edit
* Fires after a cell is edited. The edit event object has the following properties <br />
* <ul style="padding:5px;padding-left:16px;">
* @param {Ext.grid.plugin.Editing} editor
* @param {Object} e An edit event (see above for description)
*/
-<span id='Ext-grid.plugin.CellEditing-event-validateedit'> /**
+<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
* to cancel the change. The edit event object has the following properties <br />
});
},
-<span id='Ext-grid.plugin.CellEditing-method-destroy'> /**
+<span id='Ext-grid-plugin-CellEditing-method-destroy'> /**
</span> * @private
* AbstractComponent calls destroy on all its plugins at destroy time.
*/
me.editors.clear();
me.callParent(arguments);
},
+
+ onBodyScroll: function() {
+ var ed = this.getActiveEditor();
+ if (ed && ed.field) {
+ if (ed.field.triggerBlur) {
+ ed.field.triggerBlur();
+ } else {
+ ed.field.blur();
+ }
+ }
+ },
// private
// Template method called from base class's initEvents
initCancelTriggers: function() {
- var me = this;
+ var me = this,
grid = me.grid,
- view = grid.view;
-
- me.mon(view, {
- mousewheel: {
- element: 'el',
- fn: me.cancelEdit,
- scope: me
- }
- });
+ 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,
});
},
-<span id='Ext-grid.plugin.CellEditing-method-startEdit'> /**
+<span id='Ext-grid-plugin-CellEditing-method-startEdit'> /**
</span> * Start editing the specified record, using the specified Column definition to define which field is being edited.
* @param {Model} record The Store data record which backs the row to be edited.
* @param {Model} columnHeader The Column object defining the column to be edited.
},
getEditor: function(record, column) {
- var editors = this.editors,
+ var me = this,
+ editors = me.editors,
editorId = column.itemId || column.id,
editor = editors.getByKey(editorId);
field: editor
});
}
- editor.parentEl = this.grid.getEditorParent();
+ editor.parentEl = me.grid.getEditorParent();
// editor.parentEl should be set here.
editor.on({
- scope: this,
- specialkey: this.onSpecialKey,
- complete: this.onEditComplete,
- canceledit: this.cancelEdit
+ scope: me,
+ specialkey: me.onSpecialKey,
+ complete: me.onEditComplete,
+ canceledit: me.cancelEdit
});
editors.add(editor);
return editor;
}
},
-<span id='Ext-grid.plugin.CellEditing-method-getCell'> /**
+<span id='Ext-grid-plugin-CellEditing-method-getCell'> /**
</span> * Get the cell (td) for a particular record and column.
* @param {Ext.data.Model} record
* @param {Ext.grid.column.Colunm} column
var me = this,
grid = me.grid,
sm = grid.getSelectionModel(),
- dataIndex = me.getActiveColumn().dataIndex;
-
- me.setActiveEditor(null);
- me.setActiveColumn(null);
- me.setActiveRecord(null);
- delete sm.wasEditing;
+ activeColumn = me.getActiveColumn(),
+ dataIndex;
+
+ if (activeColumn) {
+ dataIndex = activeColumn.dataIndex;
+
+ me.setActiveEditor(null);
+ me.setActiveColumn(null);
+ me.setActiveRecord(null);
+ delete sm.wasEditing;
+
+ 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 (value !== startValue) {
+ me.context.record.set(dataIndex, value);
+ // Restore focus back to the view's element.
+ } else {
+ grid.getView().el.focus();
+ }
+ me.context.value = value;
+ me.fireEvent('edit', me, me.context);
+
- if (!me.validateEdit()) {
- return;
}
- me.context.record.set(dataIndex, value);
- me.fireEvent('edit', me, me.context);
},
-<span id='Ext-grid.plugin.CellEditing-method-cancelEdit'> /**
+<span id='Ext-grid-plugin-CellEditing-method-cancelEdit'> /**
</span> * Cancel any active editing.
*/
cancelEdit: function() {
}
},
-<span id='Ext-grid.plugin.CellEditing-method-startEditByPosition'> /**
+<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.
*/
}
me.startEdit(editRecord, editColumnHeader);
}
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>