docs/source/EditorGrid.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.grid.EditorGridPanel"></div>/**
  10  * @class Ext.grid.EditorGridPanel
  11  * @extends Ext.grid.GridPanel
  12  * <p>This class extends the {@link Ext.grid.GridPanel GridPanel Class} to provide cell editing
  13  * on selected {@link Ext.grid.Column columns}. The editable columns are specified by providing
  14  * an {@link Ext.grid.ColumnModel#editor editor} in the {@link Ext.grid.Column column configuration}.</p>
  15  * <p>Editability of columns may be controlled programatically by inserting an implementation
  16  * of {@link Ext.grid.ColumnModel#isCellEditable isCellEditable} into the
  17  * {@link Ext.grid.ColumnModel ColumnModel}.</p>
  18  * <p>Editing is performed on the value of the <i>field</i> specified by the column's
  19  * <tt>{@link Ext.grid.ColumnModel#dataIndex dataIndex}</tt> in the backing {@link Ext.data.Store Store}
  20  * (so if you are using a {@link Ext.grid.ColumnModel#setRenderer renderer} in order to display
  21  * transformed data, this must be accounted for).</p>
  22  * <p>If a value-to-description mapping is used to render a column, then a {@link Ext.form.Field#ComboBox ComboBox}
  23  * which uses the same {@link Ext.form.Field#valueField value}-to-{@link Ext.form.Field#displayFieldField description}
  24  * mapping would be an appropriate editor.</p>
  25  * If there is a more complex mismatch between the visible data in the grid, and the editable data in
  26  * the {@link Edt.data.Store Store}, then code to transform the data both before and after editing can be
  27  * injected using the {@link #beforeedit} and {@link #afteredit} events.
  28  * @constructor
  29  * @param {Object} config The config object
  30  * @xtype editorgrid
  31  */
  32 Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {
  33     <div id="cfg-Ext.grid.EditorGridPanel-clicksToEdit"></div>/**
  34      * @cfg {Number} clicksToEdit
  35      * <p>The number of clicks on a cell required to display the cell's editor (defaults to 2).</p>
  36      * <p>Setting this option to 'auto' means that mousedown <i>on the selected cell</i> starts
  37      * editing that cell.</p>
  38      */
  39     clicksToEdit: 2,
  40
  41     <div id="cfg-Ext.grid.EditorGridPanel-forceValidation"></div>/**
  42     * @cfg {Boolean} forceValidation
  43     * True to force validation even if the value is unmodified (defaults to false)
  44     */
  45     forceValidation: false,
  46
  47     // private
  48     isEditor : true,
  49     // private
  50     detectEdit: false,
  51
  52     <div id="cfg-Ext.grid.EditorGridPanel-autoEncode"></div>/**
  53      * @cfg {Boolean} autoEncode
  54      * True to automatically HTML encode and decode values pre and post edit (defaults to false)
  55      */
  56     autoEncode : false,
  57
  58     <div id="cfg-Ext.grid.EditorGridPanel-trackMouseOver"></div>/**
  59      * @cfg {Boolean} trackMouseOver @hide
  60      */
  61     // private
  62     trackMouseOver: false, // causes very odd FF errors
  63
  64     // private
  65     initComponent : function(){
  66         Ext.grid.EditorGridPanel.superclass.initComponent.call(this);
  67
  68         if(!this.selModel){
  69             <div id="cfg-Ext.grid.EditorGridPanel-selModel"></div>/**
  70              * @cfg {Object} selModel Any subclass of AbstractSelectionModel that will provide the selection model for
  71              * the grid (defaults to {@link Ext.grid.CellSelectionModel} if not specified).
  72              */
  73             this.selModel = new Ext.grid.CellSelectionModel();
  74         }
  75
  76         this.activeEditor = null;
  77
  78         this.addEvents(
  79             <div id="event-Ext.grid.EditorGridPanel-beforeedit"></div>/**
  80              * @event beforeedit
  81              * Fires before cell editing is triggered. The edit event object has the following properties <br />
  82              * <ul style="padding:5px;padding-left:16px;">
  83              * <li>grid - This grid</li>
  84              * <li>record - The record being edited</li>
  85              * <li>field - The field name being edited</li>
  86              * <li>value - The value for the field being edited.</li>
  87              * <li>row - The grid row index</li>
  88              * <li>column - The grid column index</li>
  89              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
  90              * </ul>
  91              * @param {Object} e An edit event (see above for description)
  92              */
  93             "beforeedit",
  94             <div id="event-Ext.grid.EditorGridPanel-afteredit"></div>/**
  95              * @event afteredit
  96              * Fires after a cell is edited. The edit event object has the following properties <br />
  97              * <ul style="padding:5px;padding-left:16px;">
  98              * <li>grid - This grid</li>
  99              * <li>record - The record being edited</li>
 100              * <li>field - The field name being edited</li>
 101              * <li>value - The value being set</li>
 102              * <li>originalValue - The original value for the field, before the edit.</li>
 103              * <li>row - The grid row index</li>
 104              * <li>column - The grid column index</li>
 105              * </ul>
 106              *
 107              * <pre><code>
 108 grid.on('afteredit', afterEdit, this );
 109
 110 function afterEdit(e) {
 111     // execute an XHR to send/commit data to the server, in callback do (if successful):
 112     e.record.commit();
 113 };
 114              * </code></pre>
 115              * @param {Object} e An edit event (see above for description)
 116              */
 117             "afteredit",
 118             <div id="event-Ext.grid.EditorGridPanel-validateedit"></div>/**
 119              * @event validateedit
 120              * Fires after a cell is edited, but before the value is set in the record. Return false
 121              * to cancel the change. The edit event object has the following properties <br />
 122              * <ul style="padding:5px;padding-left:16px;">
 123              * <li>grid - This grid</li>
 124              * <li>record - The record being edited</li>
 125              * <li>field - The field name being edited</li>
 126              * <li>value - The value being set</li>
 127              * <li>originalValue - The original value for the field, before the edit.</li>
 128              * <li>row - The grid row index</li>
 129              * <li>column - The grid column index</li>
 130              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
 131              * </ul>
 132              * Usage example showing how to remove the red triangle (dirty record indicator) from some
 133              * records (not all).  By observing the grid's validateedit event, it can be cancelled if
 134              * the edit occurs on a targeted row (for example) and then setting the field's new value
 135              * in the Record directly:
 136              * <pre><code>
 137 grid.on('validateedit', function(e) {
 138   var myTargetRow = 6;
 139
 140   if (e.row == myTargetRow) {
 141     e.cancel = true;
 142     e.record.data[e.field] = e.value;
 143   }
 144 });
 145              * </code></pre>
 146              * @param {Object} e An edit event (see above for description)
 147              */
 148             "validateedit"
 149         );
 150     },
 151
 152     // private
 153     initEvents : function(){
 154         Ext.grid.EditorGridPanel.superclass.initEvents.call(this);
 155
 156         this.getGridEl().on('mousewheel', this.stopEditing.createDelegate(this, [true]), this);
 157         this.on('columnresize', this.stopEditing, this, [true]);
 158
 159         if(this.clicksToEdit == 1){
 160             this.on("cellclick", this.onCellDblClick, this);
 161         }else {
 162             var view = this.getView();
 163             if(this.clicksToEdit == 'auto' && view.mainBody){
 164                 view.mainBody.on('mousedown', this.onAutoEditClick, this);
 165             }
 166             this.on('celldblclick', this.onCellDblClick, this);
 167         }
 168     },
 169
 170     onResize : function(){
 171         Ext.grid.EditorGridPanel.superclass.onResize.apply(this, arguments);
 172         var ae = this.activeEditor;
 173         if(this.editing && ae){
 174             ae.realign(true);
 175         }
 176     },
 177
 178     // private
 179     onCellDblClick : function(g, row, col){
 180         this.startEditing(row, col);
 181     },
 182
 183     // private
 184     onAutoEditClick : function(e, t){
 185         if(e.button !== 0){
 186             return;
 187         }
 188         var row = this.view.findRowIndex(t),
 189             col = this.view.findCellIndex(t);
 190         if(row !== false && col !== false){
 191             this.stopEditing();
 192             if(this.selModel.getSelectedCell){ // cell sm
 193                 var sc = this.selModel.getSelectedCell();
 194                 if(sc && sc[0] === row && sc[1] === col){
 195                     this.startEditing(row, col);
 196                 }
 197             }else{
 198                 if(this.selModel.isSelected(row)){
 199                     this.startEditing(row, col);
 200                 }
 201             }
 202         }
 203     },
 204
 205     // private
 206     onEditComplete : function(ed, value, startValue){
 207         this.editing = false;
 208         this.activeEditor = null;
 209
 210         var r = ed.record,
 211             field = this.colModel.getDataIndex(ed.col);
 212         value = this.postEditValue(value, startValue, r, field);
 213         if(this.forceValidation === true || String(value) !== String(startValue)){
 214             var e = {
 215                 grid: this,
 216                 record: r,
 217                 field: field,
 218                 originalValue: startValue,
 219                 value: value,
 220                 row: ed.row,
 221                 column: ed.col,
 222                 cancel:false
 223             };
 224             if(this.fireEvent("validateedit", e) !== false && !e.cancel && String(value) !== String(startValue)){
 225                 r.set(field, e.value);
 226                 delete e.cancel;
 227                 this.fireEvent("afteredit", e);
 228             }
 229         }
 230         this.view.focusCell(ed.row, ed.col);
 231     },
 232
 233     <div id="method-Ext.grid.EditorGridPanel-startEditing"></div>/**
 234      * Starts editing the specified for the specified row/column
 235      * @param {Number} rowIndex
 236      * @param {Number} colIndex
 237      */
 238     startEditing : function(row, col){
 239         this.stopEditing();
 240         if(this.colModel.isCellEditable(col, row)){
 241             this.view.ensureVisible(row, col, true);
 242             var r = this.store.getAt(row),
 243                 field = this.colModel.getDataIndex(col),
 244                 e = {
 245                     grid: this,
 246                     record: r,
 247                     field: field,
 248                     value: r.data[field],
 249                     row: row,
 250                     column: col,
 251                     cancel:false
 252                 };
 253             if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
 254                 this.editing = true;
 255                 var ed = this.colModel.getCellEditor(col, row);
 256                 if(!ed){
 257                     return;
 258                 }
 259                 if(!ed.rendered){
 260                     ed.parentEl = this.view.getEditorParent(ed);
 261                     ed.on({
 262                         scope: this,
 263                         render: {
 264                             fn: function(c){
 265                                 c.field.focus(false, true);
 266                             },
 267                             single: true,
 268                             scope: this
 269                         },
 270                         specialkey: function(field, e){
 271                             this.getSelectionModel().onEditorKey(field, e);
 272                         },
 273                         complete: this.onEditComplete,
 274                         canceledit: this.stopEditing.createDelegate(this, [true])
 275                     });
 276                 }
 277                 Ext.apply(ed, {
 278                     row     : row,
 279                     col     : col,
 280                     record  : r
 281                 });
 282                 this.lastEdit = {
 283                     row: row,
 284                     col: col
 285                 };
 286                 this.activeEditor = ed;
 287                 // Set the selectSameEditor flag if we are reusing the same editor again and
 288                 // need to prevent the editor from firing onBlur on itself.
 289                 ed.selectSameEditor = (this.activeEditor == this.lastActiveEditor);
 290                 var v = this.preEditValue(r, field);
 291                 ed.startEdit(this.view.getCell(row, col).firstChild, Ext.isDefined(v) ? v : '');
 292
 293                 // Clear the selectSameEditor flag
 294                 (function(){
 295                     delete ed.selectSameEditor;
 296                 }).defer(50);
 297             }
 298         }
 299     },
 300
 301     // private
 302     preEditValue : function(r, field){
 303         var value = r.data[field];
 304         return this.autoEncode && Ext.isString(value) ? Ext.util.Format.htmlDecode(value) : value;
 305     },
 306
 307     // private
 308     postEditValue : function(value, originalValue, r, field){
 309         return this.autoEncode && Ext.isString(value) ? Ext.util.Format.htmlEncode(value) : value;
 310     },
 311
 312     <div id="method-Ext.grid.EditorGridPanel-stopEditing"></div>/**
 313      * Stops any active editing
 314      * @param {Boolean} cancel (optional) True to cancel any changes
 315      */
 316     stopEditing : function(cancel){
 317         if(this.editing){
 318             // Store the lastActiveEditor to check if it is changing
 319             var ae = this.lastActiveEditor = this.activeEditor;
 320             if(ae){
 321                 ae[cancel === true ? 'cancelEdit' : 'completeEdit']();
 322                 this.view.focusCell(ae.row, ae.col);
 323             }
 324             this.activeEditor = null;
 325         }
 326         this.editing = false;
 327     }
 328 });
 329 Ext.reg('editorgrid', Ext.grid.EditorGridPanel);</pre>    \r
 330 </body>\r
 331 </html>