docs/source/EditorGrid.html

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