docs/source/RowEditing.html

   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><span id='Ext-grid.plugin.RowEditing'>/**
   2 </span> * @class Ext.grid.plugin.RowEditing
   3  * @extends Ext.grid.plugin.Editing
   4  *
   5  * The Ext.grid.plugin.RowEditing plugin injects editing at a row level for a Grid. When editing begins,
   6  * a small floating dialog will be shown for the appropriate row. Each editable column will show a field
   7  * for editing. There is a button to save or cancel all changes for the edit.
   8  *
   9  * The field that will be used for the editor is defined at the
  10  * {@link Ext.grid.column.Column#field field}. The editor can be a field instance or a field configuration.
  11  * If an editor is not specified for a particular column then that column won't be editable and the value of
  12  * the column will be displayed.
  13  *
  14  * The editor may be shared for each column in the grid, or a different one may be specified for each column.
  15  * An appropriate field type should be chosen to match the data structure that it will be editing. For example,
  16  * to edit a date, it would be useful to specify {@link Ext.form.field.Date} as the editor.
  17  *
  18  * {@img Ext.grid.plugin.RowEditing/Ext.grid.plugin.RowEditing.png Ext.grid.plugin.RowEditing plugin}
  19  *
  20  * ## Example Usage
  21  *
  22  *     Ext.create('Ext.data.Store', {
  23  *         storeId:'simpsonsStore',
  24  *         fields:['name', 'email', 'phone'],
  25  *         data:{'items':[
  26  *             {&quot;name&quot;:&quot;Lisa&quot;, &quot;email&quot;:&quot;lisa@simpsons.com&quot;, &quot;phone&quot;:&quot;555-111-1224&quot;},
  27  *             {&quot;name&quot;:&quot;Bart&quot;, &quot;email&quot;:&quot;bart@simpsons.com&quot;, &quot;phone&quot;:&quot;555--222-1234&quot;},
  28  *             {&quot;name&quot;:&quot;Homer&quot;, &quot;email&quot;:&quot;home@simpsons.com&quot;, &quot;phone&quot;:&quot;555-222-1244&quot;},
  29  *             {&quot;name&quot;:&quot;Marge&quot;, &quot;email&quot;:&quot;marge@simpsons.com&quot;, &quot;phone&quot;:&quot;555-222-1254&quot;}
  30  *         ]},
  31  *         proxy: {
  32  *             type: 'memory',
  33  *             reader: {
  34  *                 type: 'json',
  35  *                 root: 'items'
  36  *             }
  37  *         }
  38  *     });
  39  *
  40  *     Ext.create('Ext.grid.Panel', {
  41  *         title: 'Simpsons',
  42  *         store: Ext.data.StoreManager.lookup('simpsonsStore'),
  43  *         columns: [
  44  *             {header: 'Name',  dataIndex: 'name', field: 'textfield'},
  45  *             {header: 'Email', dataIndex: 'email', flex:1,
  46  *                 editor: {
  47  *                     xtype:'textfield',
  48  *                     allowBlank:false
  49  *                 }
  50  *             },
  51  *             {header: 'Phone', dataIndex: 'phone'}
  52  *         ],
  53  *         selType: 'rowmodel',
  54  *         plugins: [
  55  *             Ext.create('Ext.grid.plugin.RowEditing', {
  56  *                 clicksToEdit: 1
  57  *             })
  58  *         ],
  59  *         height: 200,
  60  *         width: 400,
  61  *         renderTo: Ext.getBody()
  62  *     });
  63  */
  64 Ext.define('Ext.grid.plugin.RowEditing', {
  65     extend: 'Ext.grid.plugin.Editing',
  66     alias: 'plugin.rowediting',
  67
  68     requires: [
  69         'Ext.grid.RowEditor'
  70     ],
  71
  72     editStyle: 'row',
  73
  74 <span id='Ext-grid.plugin.RowEditing-cfg-autoCancel'>    /**
  75 </span>     * @cfg {Boolean} autoCancel
  76      * `true` to automatically cancel any pending changes when the row editor begins editing a new row.
  77      * `false` to force the user to explicitly cancel the pending changes. Defaults to `true`.
  78      * @markdown
  79      */
  80     autoCancel: true,
  81
  82 <span id='Ext-grid.plugin.RowEditing-cfg-clicksToMoveEditor'>    /**
  83 </span>     * @cfg {Number} clicksToMoveEditor
  84      * The number of clicks to move the row editor to a new row while it is visible and actively editing another row.
  85      * This will default to the same value as {@link Ext.grid.plugin.Editing#clicksToEdit clicksToEdit}.
  86      * @markdown
  87      */
  88
  89 <span id='Ext-grid.plugin.RowEditing-cfg-errorSummary'>    /**
  90 </span>     * @cfg {Boolean} errorSummary
  91      * `true` to show a {@link Ext.tip.ToolTip tooltip} that summarizes all validation errors present
  92      * in the row editor. Set to `false` to prevent the tooltip from showing. Defaults to `true`.
  93      * @markdown
  94      */
  95     errorSummary: true,
  96
  97 <span id='Ext-grid.plugin.RowEditing-event-beforeedit'>    /**
  98 </span>     * @event beforeedit
  99      * Fires before row editing is triggered. The edit event object has the following properties &lt;br /&gt;
 100      * &lt;ul style=&quot;padding:5px;padding-left:16px;&quot;&gt;
 101      * &lt;li&gt;grid - The grid this editor is on&lt;/li&gt;
 102      * &lt;li&gt;view - The grid view&lt;/li&gt;
 103      * &lt;li&gt;store - The grid store&lt;/li&gt;
 104      * &lt;li&gt;record - The record being edited&lt;/li&gt;
 105      * &lt;li&gt;row - The grid table row&lt;/li&gt;
 106      * &lt;li&gt;column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit&lt;/li&gt;
 107      * &lt;li&gt;rowIdx - The row index that is being edited&lt;/li&gt;
 108      * &lt;li&gt;colIdx - The column index that initiated the edit&lt;/li&gt;
 109      * &lt;li&gt;cancel - Set this to true to cancel the edit or return false from your handler.&lt;/li&gt;
 110      * &lt;/ul&gt;
 111      * @param {Ext.grid.plugin.Editing} editor
 112      * @param {Object} e An edit event (see above for description)
 113      */
 114 <span id='Ext-grid.plugin.RowEditing-event-edit'>    /**
 115 </span>     * @event edit
 116      * Fires after a row is edited. The edit event object has the following properties &lt;br /&gt;
 117      * &lt;ul style=&quot;padding:5px;padding-left:16px;&quot;&gt;
 118      * &lt;li&gt;grid - The grid this editor is on&lt;/li&gt;
 119      * &lt;li&gt;view - The grid view&lt;/li&gt;
 120      * &lt;li&gt;store - The grid store&lt;/li&gt;
 121      * &lt;li&gt;record - The record being edited&lt;/li&gt;
 122      * &lt;li&gt;row - The grid table row&lt;/li&gt;
 123      * &lt;li&gt;column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit&lt;/li&gt;
 124      * &lt;li&gt;rowIdx - The row index that is being edited&lt;/li&gt;
 125      * &lt;li&gt;colIdx - The column index that initiated the edit&lt;/li&gt;
 126      * &lt;/ul&gt;
 127      *
 128      * &lt;pre&gt;&lt;code&gt;
 129 grid.on('edit', onEdit, this);
 130
 131 function onEdit(e) {
 132     // execute an XHR to send/commit data to the server, in callback do (if successful):
 133     e.record.commit();
 134 };
 135      * &lt;/code&gt;&lt;/pre&gt;
 136      * @param {Ext.grid.plugin.Editing} editor
 137      * @param {Object} e An edit event (see above for description)
 138      */
 139 <span id='Ext-grid.plugin.RowEditing-event-validateedit'>    /**
 140 </span>     * @event validateedit
 141      * Fires after a cell is edited, but before the value is set in the record. Return false
 142      * to cancel the change. The edit event object has the following properties &lt;br /&gt;
 143      * &lt;ul style=&quot;padding:5px;padding-left:16px;&quot;&gt;
 144      * &lt;li&gt;grid - The grid this editor is on&lt;/li&gt;
 145      * &lt;li&gt;view - The grid view&lt;/li&gt;
 146      * &lt;li&gt;store - The grid store&lt;/li&gt;
 147      * &lt;li&gt;record - The record being edited&lt;/li&gt;
 148      * &lt;li&gt;row - The grid table row&lt;/li&gt;
 149      * &lt;li&gt;column - The grid {@link Ext.grid.column.Column Column} defining the column that initiated the edit&lt;/li&gt;
 150      * &lt;li&gt;rowIdx - The row index that is being edited&lt;/li&gt;
 151      * &lt;li&gt;colIdx - The column index that initiated the edit&lt;/li&gt;
 152      * &lt;li&gt;cancel - Set this to true to cancel the edit or return false from your handler.&lt;/li&gt;
 153      * &lt;/ul&gt;
 154      * Usage example showing how to remove the red triangle (dirty record indicator) from some
 155      * records (not all).  By observing the grid's validateedit event, it can be cancelled if
 156      * the edit occurs on a targeted row (for example) and then setting the field's new value
 157      * in the Record directly:
 158      * &lt;pre&gt;&lt;code&gt;
 159 grid.on('validateedit', function(e) {
 160   var myTargetRow = 6;
 161
 162   if (e.rowIdx == myTargetRow) {
 163     e.cancel = true;
 164     e.record.data[e.field] = e.value;
 165   }
 166 });
 167      * &lt;/code&gt;&lt;/pre&gt;
 168      * @param {Ext.grid.plugin.Editing} editor
 169      * @param {Object} e An edit event (see above for description)
 170      */
 171
 172     constructor: function() {
 173         var me = this;
 174         me.callParent(arguments);
 175
 176         if (!me.clicksToMoveEditor) {
 177             me.clicksToMoveEditor = me.clicksToEdit;
 178         }
 179
 180         me.autoCancel = !!me.autoCancel;
 181     },
 182
 183 <span id='Ext-grid.plugin.RowEditing-method-destroy'>    /**
 184 </span>     * @private
 185      * AbstractComponent calls destroy on all its plugins at destroy time.
 186      */
 187     destroy: function() {
 188         var me = this;
 189         Ext.destroy(me.editor);
 190         me.callParent(arguments);
 191     },
 192
 193 <span id='Ext-grid.plugin.RowEditing-method-startEdit'>    /**
 194 </span>     * Start editing the specified record, using the specified Column definition to define which field is being edited.
 195      * @param {Model} record The Store data record which backs the row to be edited.
 196      * @param {Model} columnHeader The Column object defining the column to be edited.
 197      * @override
 198      */
 199     startEdit: function(record, columnHeader) {
 200         var me = this,
 201             editor = me.getEditor();
 202
 203         if (me.callParent(arguments) === false) {
 204             return false;
 205         }
 206
 207         // Fire off our editor
 208         if (editor.beforeEdit() !== false) {
 209             editor.startEdit(me.context.record, me.context.column);
 210         }
 211     },
 212
 213     // private
 214     cancelEdit: function() {
 215         var me = this;
 216
 217         if (me.editing) {
 218             me.getEditor().cancelEdit();
 219             me.callParent(arguments);
 220         }
 221     },
 222
 223     // private
 224     completeEdit: function() {
 225         var me = this;
 226
 227         if (me.editing &amp;&amp; me.validateEdit()) {
 228             me.editing = false;
 229             me.fireEvent('edit', me.context);
 230         }
 231     },
 232
 233     // private
 234     validateEdit: function() {
 235         var me = this;
 236         return me.callParent(arguments) &amp;&amp; me.getEditor().completeEdit();
 237     },
 238
 239     // private
 240     getEditor: function() {
 241         var me = this;
 242
 243         if (!me.editor) {
 244             me.editor = me.initEditor();
 245         }
 246         return me.editor;
 247     },
 248
 249     // private
 250     initEditor: function() {
 251         var me = this,
 252             grid = me.grid,
 253             view = me.view,
 254             headerCt = grid.headerCt;
 255
 256         return Ext.create('Ext.grid.RowEditor', {
 257             autoCancel: me.autoCancel,
 258             errorSummary: me.errorSummary,
 259             fields: headerCt.getGridColumns(),
 260             hidden: true,
 261
 262             // keep a reference..
 263             editingPlugin: me,
 264             renderTo: view.el
 265         });
 266     },
 267
 268     // private
 269     initEditTriggers: function() {
 270         var me = this,
 271             grid = me.grid,
 272             view = me.view,
 273             headerCt = grid.headerCt,
 274             moveEditorEvent = me.clicksToMoveEditor === 1 ? 'click' : 'dblclick';
 275
 276         me.callParent(arguments);
 277
 278         if (me.clicksToMoveEditor !== me.clicksToEdit) {
 279             me.mon(view, 'cell' + moveEditorEvent, me.moveEditorByClick, me);
 280         }
 281
 282         view.on('render', function() {
 283             // Column events
 284             me.mon(headerCt, {
 285                 add: me.onColumnAdd,
 286                 remove: me.onColumnRemove,
 287                 columnresize: me.onColumnResize,
 288                 columnhide: me.onColumnHide,
 289                 columnshow: me.onColumnShow,
 290                 columnmove: me.onColumnMove,
 291                 scope: me
 292             });
 293         }, me, { single: true });
 294     },
 295
 296     startEditByClick: function() {
 297         var me = this;
 298         if (!me.editing || me.clicksToMoveEditor === me.clicksToEdit) {
 299             me.callParent(arguments);
 300         }
 301     },
 302
 303     moveEditorByClick: function() {
 304         var me = this;
 305         if (me.editing) {
 306             me.superclass.startEditByClick.apply(me, arguments);
 307         }
 308     },
 309
 310     // private
 311     onColumnAdd: function(ct, column) {
 312         var me = this,
 313             editor = me.getEditor();
 314
 315         me.initFieldAccessors(column);
 316         if (editor &amp;&amp; editor.onColumnAdd) {
 317             editor.onColumnAdd(column);
 318         }
 319     },
 320
 321     // private
 322     onColumnRemove: function(ct, column) {
 323         var me = this,
 324             editor = me.getEditor();
 325
 326         if (editor &amp;&amp; editor.onColumnRemove) {
 327             editor.onColumnRemove(column);
 328         }
 329         me.removeFieldAccessors(column);
 330     },
 331
 332     // private
 333     onColumnResize: function(ct, column, width) {
 334         var me = this,
 335             editor = me.getEditor();
 336
 337         if (editor &amp;&amp; editor.onColumnResize) {
 338             editor.onColumnResize(column, width);
 339         }
 340     },
 341
 342     // private
 343     onColumnHide: function(ct, column) {
 344         var me = this,
 345             editor = me.getEditor();
 346
 347         if (editor &amp;&amp; editor.onColumnHide) {
 348             editor.onColumnHide(column);
 349         }
 350     },
 351
 352     // private
 353     onColumnShow: function(ct, column) {
 354         var me = this,
 355             editor = me.getEditor();
 356
 357         if (editor &amp;&amp; editor.onColumnShow) {
 358             editor.onColumnShow(column);
 359         }
 360     },
 361
 362     // private
 363     onColumnMove: function(ct, column, fromIdx, toIdx) {
 364         var me = this,
 365             editor = me.getEditor();
 366
 367         if (editor &amp;&amp; editor.onColumnMove) {
 368             editor.onColumnMove(column, fromIdx, toIdx);
 369         }
 370     },
 371
 372     // private
 373     setColumnField: function(column, field) {
 374         var me = this;
 375         me.callParent(arguments);
 376         me.getEditor().setField(column.field, column);
 377     }
 378 });</pre></pre></body></html>