docs/source/EditorGrid.html

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