Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / CellEditing.html
index ec7a495..f04e2e7 100644 (file)
@@ -1,4 +1,21 @@
-<!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
  *
@@ -65,7 +82,7 @@ Ext.define('Ext.grid.plugin.CellEditing', {
     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 &lt;br /&gt;
          * &lt;ul style=&quot;padding:5px;padding-left:16px;&quot;&gt;
@@ -82,7 +99,7 @@ Ext.define('Ext.grid.plugin.CellEditing', {
          * @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 &lt;br /&gt;
          * &lt;ul style=&quot;padding:5px;padding-left:16px;&quot;&gt;
@@ -108,7 +125,7 @@ function onEdit(e) {
          * @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 &lt;br /&gt;
@@ -147,7 +164,7 @@ grid.on('validateedit', function(e) {
         });
     },
 
-<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.
      */
@@ -157,21 +174,27 @@ grid.on('validateedit', function(e) {
         me.editors.clear();
         me.callParent(arguments);
     },
+    
+    onBodyScroll: function() {
+        var ed = this.getActiveEditor();
+        if (ed &amp;&amp; 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,
@@ -179,7 +202,7 @@ grid.on('validateedit', function(e) {
         });
     },
 
-<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.
@@ -258,7 +281,8 @@ grid.on('validateedit', function(e) {
     },
 
     getEditor: function(record, column) {
-        var editors = this.editors,
+        var me = this,
+            editors = me.editors,
             editorId = column.itemId || column.id,
             editor = editors.getByKey(editorId);
 
@@ -277,20 +301,20 @@ grid.on('validateedit', function(e) {
                     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
@@ -316,21 +340,36 @@ grid.on('validateedit', function(e) {
         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() {
@@ -347,7 +386,7 @@ grid.on('validateedit', function(e) {
         }
     },
 
-<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.
      */
@@ -363,4 +402,6 @@ grid.on('validateedit', function(e) {
         }
         me.startEdit(editRecord, editColumnHeader);
     }
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>