src/widgets/grid/EditorGrid.js

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