docs/source/EditorGrid.html

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