pkgs/pkg-grid-editor-debug.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.grid.CellSelectionModel
   9  * @extends Ext.grid.AbstractSelectionModel
  10  * This class provides the basic implementation for <i>single</i> <b>cell</b> selection in a grid.
  11  * The object stored as the selection contains the following properties:
  12  * <div class="mdetail-params"><ul>
  13  * <li><b>cell</b> : see {@link #getSelectedCell}
  14  * <li><b>record</b> : Ext.data.record The {@link Ext.data.Record Record}
  15  * which provides the data for the row containing the selection</li>
  16  * </ul></div>
  17  * @constructor
  18  * @param {Object} config The object containing the configuration of this model.
  19  */
  20 Ext.grid.CellSelectionModel = function(config){
  21     Ext.apply(this, config);
  22
  23     this.selection = null;
  24
  25     this.addEvents(
  26         /**
  27              * @event beforecellselect
  28              * Fires before a cell is selected, return false to cancel the selection.
  29              * @param {SelectionModel} this
  30              * @param {Number} rowIndex The selected row index
  31              * @param {Number} colIndex The selected cell index
  32              */
  33             "beforecellselect",
  34         /**
  35              * @event cellselect
  36              * Fires when a cell is selected.
  37              * @param {SelectionModel} this
  38              * @param {Number} rowIndex The selected row index
  39              * @param {Number} colIndex The selected cell index
  40              */
  41             "cellselect",
  42         /**
  43              * @event selectionchange
  44              * Fires when the active selection changes.
  45              * @param {SelectionModel} this
  46              * @param {Object} selection null for no selection or an object with two properties
  47          * <div class="mdetail-params"><ul>
  48          * <li><b>cell</b> : see {@link #getSelectedCell}
  49          * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record Record}
  50          * which provides the data for the row containing the selection</p></li>
  51          * </ul></div>
  52              */
  53             "selectionchange"
  54     );
  55
  56     Ext.grid.CellSelectionModel.superclass.constructor.call(this);
  57 };
  58
  59 Ext.extend(Ext.grid.CellSelectionModel, Ext.grid.AbstractSelectionModel,  {
  60
  61     /** @ignore */
  62     initEvents : function(){
  63         this.grid.on("cellmousedown", this.handleMouseDown, this);
  64         this.grid.getGridEl().on(Ext.EventManager.useKeydown ? "keydown" : "keypress", this.handleKeyDown, this);
  65         var view = this.grid.view;
  66         view.on("refresh", this.onViewChange, this);
  67         view.on("rowupdated", this.onRowUpdated, this);
  68         view.on("beforerowremoved", this.clearSelections, this);
  69         view.on("beforerowsinserted", this.clearSelections, this);
  70         if(this.grid.isEditor){
  71             this.grid.on("beforeedit", this.beforeEdit,  this);
  72         }
  73     },
  74
  75         //private
  76     beforeEdit : function(e){
  77         this.select(e.row, e.column, false, true, e.record);
  78     },
  79
  80         //private
  81     onRowUpdated : function(v, index, r){
  82         if(this.selection && this.selection.record == r){
  83             v.onCellSelect(index, this.selection.cell[1]);
  84         }
  85     },
  86
  87         //private
  88     onViewChange : function(){
  89         this.clearSelections(true);
  90     },
  91
  92         /**
  93      * Returns an array containing the row and column indexes of the currently selected cell
  94      * (e.g., [0, 0]), or null if none selected. The array has elements:
  95      * <div class="mdetail-params"><ul>
  96      * <li><b>rowIndex</b> : Number<p class="sub-desc">The index of the selected row</p></li>
  97      * <li><b>cellIndex</b> : Number<p class="sub-desc">The index of the selected cell.
  98      * Due to possible column reordering, the cellIndex should <b>not</b> be used as an
  99      * index into the Record's data. Instead, use the cellIndex to determine the <i>name</i>
 100      * of the selected cell and use the field name to retrieve the data value from the record:<pre><code>
 101 // get name
 102 var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
 103 // get data value based on name
 104 var data = record.get(fieldName);
 105      * </code></pre></p></li>
 106      * </ul></div>
 107      * @return {Array} An array containing the row and column indexes of the selected cell, or null if none selected.
 108          */
 109     getSelectedCell : function(){
 110         return this.selection ? this.selection.cell : null;
 111     },
 112
 113     /**
 114      * If anything is selected, clears all selections and fires the selectionchange event.
 115      * @param {Boolean} preventNotify <tt>true</tt> to prevent the gridview from
 116      * being notified about the change.
 117      */
 118     clearSelections : function(preventNotify){
 119         var s = this.selection;
 120         if(s){
 121             if(preventNotify !== true){
 122                 this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
 123             }
 124             this.selection = null;
 125             this.fireEvent("selectionchange", this, null);
 126         }
 127     },
 128
 129     /**
 130      * Returns <tt>true</tt> if there is a selection.
 131      * @return {Boolean}
 132      */
 133     hasSelection : function(){
 134         return this.selection ? true : false;
 135     },
 136
 137     /** @ignore */
 138     handleMouseDown : function(g, row, cell, e){
 139         if(e.button !== 0 || this.isLocked()){
 140             return;
 141         }
 142         this.select(row, cell);
 143     },
 144
 145     /**
 146      * Selects a cell.  Before selecting a cell, fires the
 147      * {@link #beforecellselect} event.  If this check is satisfied the cell
 148      * will be selected and followed up by  firing the {@link #cellselect} and
 149      * {@link #selectionchange} events.
 150      * @param {Number} rowIndex The index of the row to select
 151      * @param {Number} colIndex The index of the column to select
 152      * @param {Boolean} preventViewNotify (optional) Specify <tt>true</tt> to
 153      * prevent notifying the view (disables updating the selected appearance)
 154      * @param {Boolean} preventFocus (optional) Whether to prevent the cell at
 155      * the specified rowIndex / colIndex from being focused.
 156      * @param {Ext.data.Record} r (optional) The record to select
 157      */
 158     select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
 159         if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
 160             this.clearSelections();
 161             r = r || this.grid.store.getAt(rowIndex);
 162             this.selection = {
 163                 record : r,
 164                 cell : [rowIndex, colIndex]
 165             };
 166             if(!preventViewNotify){
 167                 var v = this.grid.getView();
 168                 v.onCellSelect(rowIndex, colIndex);
 169                 if(preventFocus !== true){
 170                     v.focusCell(rowIndex, colIndex);
 171                 }
 172             }
 173             this.fireEvent("cellselect", this, rowIndex, colIndex);
 174             this.fireEvent("selectionchange", this, this.selection);
 175         }
 176     },
 177
 178         //private
 179     isSelectable : function(rowIndex, colIndex, cm){
 180         return !cm.isHidden(colIndex);
 181     },
 182
 183     /** @ignore */
 184     handleKeyDown : function(e){
 185         if(!e.isNavKeyPress()){
 186             return;
 187         }
 188         var g = this.grid, s = this.selection;
 189         if(!s){
 190             e.stopEvent();
 191             var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
 192             if(cell){
 193                 this.select(cell[0], cell[1]);
 194             }
 195             return;
 196         }
 197         var sm = this;
 198         var walk = function(row, col, step){
 199             return g.walkCells(row, col, step, sm.isSelectable,  sm);
 200         };
 201         var k = e.getKey(), r = s.cell[0], c = s.cell[1];
 202         var newCell;
 203
 204         switch(k){
 205              case e.TAB:
 206                  if(e.shiftKey){
 207                      newCell = walk(r, c-1, -1);
 208                  }else{
 209                      newCell = walk(r, c+1, 1);
 210                  }
 211              break;
 212              case e.DOWN:
 213                  newCell = walk(r+1, c, 1);
 214              break;
 215              case e.UP:
 216                  newCell = walk(r-1, c, -1);
 217              break;
 218              case e.RIGHT:
 219                  newCell = walk(r, c+1, 1);
 220              break;
 221              case e.LEFT:
 222                  newCell = walk(r, c-1, -1);
 223              break;
 224              case e.ENTER:
 225                  if(g.isEditor && !g.editing){
 226                     g.startEditing(r, c);
 227                     e.stopEvent();
 228                     return;
 229                 }
 230              break;
 231         }
 232         if(newCell){
 233             this.select(newCell[0], newCell[1]);
 234             e.stopEvent();
 235         }
 236     },
 237
 238     acceptsNav : function(row, col, cm){
 239         return !cm.isHidden(col) && cm.isCellEditable(col, row);
 240     },
 241
 242     onEditorKey : function(field, e){
 243         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
 244         if(k == e.TAB){
 245             if(e.shiftKey){
 246                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
 247             }else{
 248                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
 249             }
 250             e.stopEvent();
 251         }else if(k == e.ENTER){
 252             ed.completeEdit();
 253             e.stopEvent();
 254         }else if(k == e.ESC){
 255                 e.stopEvent();
 256             ed.cancelEdit();
 257         }
 258         if(newCell){
 259             g.startEditing(newCell[0], newCell[1]);
 260         }
 261     }
 262 });/**
 263  * @class Ext.grid.EditorGridPanel
 264  * @extends Ext.grid.GridPanel
 265  * <p>This class extends the {@link Ext.grid.GridPanel GridPanel Class} to provide cell editing
 266  * on selected {@link Ext.grid.Column columns}. The editable columns are specified by providing
 267  * an {@link Ext.grid.ColumnModel#editor editor} in the {@link Ext.grid.Column column configuration}.</p>
 268  * <p>Editability of columns may be controlled programatically by inserting an implementation
 269  * of {@link Ext.grid.ColumnModel#isCellEditable isCellEditable} into the
 270  * {@link Ext.grid.ColumnModel ColumnModel}.</p>
 271  * <p>Editing is performed on the value of the <i>field</i> specified by the column's
 272  * <tt>{@link Ext.grid.ColumnModel#dataIndex dataIndex}</tt> in the backing {@link Ext.data.Store Store}
 273  * (so if you are using a {@link Ext.grid.ColumnModel#setRenderer renderer} in order to display
 274  * transformed data, this must be accounted for).</p>
 275  * <p>If a value-to-description mapping is used to render a column, then a {@link Ext.form.Field#ComboBox ComboBox}
 276  * which uses the same {@link Ext.form.Field#valueField value}-to-{@link Ext.form.Field#displayFieldField description}
 277  * mapping would be an appropriate editor.</p>
 278  * If there is a more complex mismatch between the visible data in the grid, and the editable data in
 279  * the {@link Edt.data.Store Store}, then code to transform the data both before and after editing can be
 280  * injected using the {@link #beforeedit} and {@link #afteredit} events.
 281  * @constructor
 282  * @param {Object} config The config object
 283  * @xtype editorgrid
 284  */
 285 Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {
 286     /**
 287      * @cfg {Number} clicksToEdit
 288      * <p>The number of clicks on a cell required to display the cell's editor (defaults to 2).</p>
 289      * <p>Setting this option to 'auto' means that mousedown <i>on the selected cell</i> starts
 290      * editing that cell.</p>
 291      */
 292     clicksToEdit: 2,
 293
 294     /**
 295     * @cfg {Boolean} forceValidation
 296     * True to force validation even if the value is unmodified (defaults to false)
 297     */
 298     forceValidation: false,
 299
 300     // private
 301     isEditor : true,
 302     // private
 303     detectEdit: false,
 304
 305         /**
 306          * @cfg {Boolean} autoEncode
 307          * True to automatically HTML encode and decode values pre and post edit (defaults to false)
 308          */
 309         autoEncode : false,
 310
 311         /**
 312          * @cfg {Boolean} trackMouseOver @hide
 313          */
 314     // private
 315     trackMouseOver: false, // causes very odd FF errors
 316
 317     // private
 318     initComponent : function(){
 319         Ext.grid.EditorGridPanel.superclass.initComponent.call(this);
 320
 321         if(!this.selModel){
 322             /**
 323              * @cfg {Object} selModel Any subclass of AbstractSelectionModel that will provide the selection model for
 324              * the grid (defaults to {@link Ext.grid.CellSelectionModel} if not specified).
 325              */
 326             this.selModel = new Ext.grid.CellSelectionModel();
 327         }
 328
 329         this.activeEditor = null;
 330
 331             this.addEvents(
 332             /**
 333              * @event beforeedit
 334              * Fires before cell editing is triggered. The edit event object has the following properties <br />
 335              * <ul style="padding:5px;padding-left:16px;">
 336              * <li>grid - This grid</li>
 337              * <li>record - The record being edited</li>
 338              * <li>field - The field name being edited</li>
 339              * <li>value - The value for the field being edited.</li>
 340              * <li>row - The grid row index</li>
 341              * <li>column - The grid column index</li>
 342              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
 343              * </ul>
 344              * @param {Object} e An edit event (see above for description)
 345              */
 346             "beforeedit",
 347             /**
 348              * @event afteredit
 349              * Fires after a cell is edited. The edit event object has the following properties <br />
 350              * <ul style="padding:5px;padding-left:16px;">
 351              * <li>grid - This grid</li>
 352              * <li>record - The record being edited</li>
 353              * <li>field - The field name being edited</li>
 354              * <li>value - The value being set</li>
 355              * <li>originalValue - The original value for the field, before the edit.</li>
 356              * <li>row - The grid row index</li>
 357              * <li>column - The grid column index</li>
 358              * </ul>
 359              *
 360              * <pre><code>
 361 grid.on('afteredit', afterEdit, this );
 362
 363 function afterEdit(e) {
 364     // execute an XHR to send/commit data to the server, in callback do (if successful):
 365     e.record.commit();
 366 };
 367              * </code></pre>
 368              * @param {Object} e An edit event (see above for description)
 369              */
 370             "afteredit",
 371             /**
 372              * @event validateedit
 373              * Fires after a cell is edited, but before the value is set in the record. Return false
 374              * to cancel the change. The edit event object has the following properties <br />
 375              * <ul style="padding:5px;padding-left:16px;">
 376              * <li>grid - This grid</li>
 377              * <li>record - The record being edited</li>
 378              * <li>field - The field name being edited</li>
 379              * <li>value - The value being set</li>
 380              * <li>originalValue - The original value for the field, before the edit.</li>
 381              * <li>row - The grid row index</li>
 382              * <li>column - The grid column index</li>
 383              * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
 384              * </ul>
 385              * Usage example showing how to remove the red triangle (dirty record indicator) from some
 386              * records (not all).  By observing the grid's validateedit event, it can be cancelled if
 387              * the edit occurs on a targeted row (for example) and then setting the field's new value
 388              * in the Record directly:
 389              * <pre><code>
 390 grid.on('validateedit', function(e) {
 391   var myTargetRow = 6;
 392
 393   if (e.row == myTargetRow) {
 394     e.cancel = true;
 395     e.record.data[e.field] = e.value;
 396   }
 397 });
 398              * </code></pre>
 399              * @param {Object} e An edit event (see above for description)
 400              */
 401             "validateedit"
 402         );
 403     },
 404
 405     // private
 406     initEvents : function(){
 407         Ext.grid.EditorGridPanel.superclass.initEvents.call(this);
 408
 409         this.on("bodyscroll", this.stopEditing, this, [true]);
 410         this.on("columnresize", this.stopEditing, this, [true]);
 411
 412         if(this.clicksToEdit == 1){
 413             this.on("cellclick", this.onCellDblClick, this);
 414         }else {
 415             if(this.clicksToEdit == 'auto' && this.view.mainBody){
 416                 this.view.mainBody.on("mousedown", this.onAutoEditClick, this);
 417             }
 418             this.on("celldblclick", this.onCellDblClick, this);
 419         }
 420     },
 421
 422     // private
 423     onCellDblClick : function(g, row, col){
 424         this.startEditing(row, col);
 425     },
 426
 427     // private
 428     onAutoEditClick : function(e, t){
 429         if(e.button !== 0){
 430             return;
 431         }
 432         var row = this.view.findRowIndex(t);
 433         var col = this.view.findCellIndex(t);
 434         if(row !== false && col !== false){
 435             this.stopEditing();
 436             if(this.selModel.getSelectedCell){ // cell sm
 437                 var sc = this.selModel.getSelectedCell();
 438                 if(sc && sc[0] === row && sc[1] === col){
 439                     this.startEditing(row, col);
 440                 }
 441             }else{
 442                 if(this.selModel.isSelected(row)){
 443                     this.startEditing(row, col);
 444                 }
 445             }
 446         }
 447     },
 448
 449     // private
 450     onEditComplete : function(ed, value, startValue){
 451         this.editing = false;
 452         this.activeEditor = null;
 453         ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
 454                 var r = ed.record;
 455         var field = this.colModel.getDataIndex(ed.col);
 456         value = this.postEditValue(value, startValue, r, field);
 457         if(this.forceValidation === true || String(value) !== String(startValue)){
 458             var e = {
 459                 grid: this,
 460                 record: r,
 461                 field: field,
 462                 originalValue: startValue,
 463                 value: value,
 464                 row: ed.row,
 465                 column: ed.col,
 466                 cancel:false
 467             };
 468             if(this.fireEvent("validateedit", e) !== false && !e.cancel && String(value) !== String(startValue)){
 469                 r.set(field, e.value);
 470                 delete e.cancel;
 471                 this.fireEvent("afteredit", e);
 472             }
 473         }
 474         this.view.focusCell(ed.row, ed.col);
 475     },
 476
 477     /**
 478      * Starts editing the specified for the specified row/column
 479      * @param {Number} rowIndex
 480      * @param {Number} colIndex
 481      */
 482     startEditing : function(row, col){
 483         this.stopEditing();
 484         if(this.colModel.isCellEditable(col, row)){
 485             this.view.ensureVisible(row, col, true);
 486             var r = this.store.getAt(row);
 487             var field = this.colModel.getDataIndex(col);
 488             var e = {
 489                 grid: this,
 490                 record: r,
 491                 field: field,
 492                 value: r.data[field],
 493                 row: row,
 494                 column: col,
 495                 cancel:false
 496             };
 497             if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
 498                 this.editing = true;
 499                 var ed = this.colModel.getCellEditor(col, row);
 500                 if(!ed){
 501                     return;
 502                 }
 503                 if(!ed.rendered){
 504                     ed.render(this.view.getEditorParent(ed));
 505                 }
 506                 (function(){ // complex but required for focus issues in safari, ie and opera
 507                     ed.row = row;
 508                     ed.col = col;
 509                     ed.record = r;
 510                     ed.on("complete", this.onEditComplete, this, {single: true});
 511                     ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
 512                     /**
 513                      * The currently active editor or null
 514                       * @type Ext.Editor
 515                      */
 516                     this.activeEditor = ed;
 517                     var v = this.preEditValue(r, field);
 518                     ed.startEdit(this.view.getCell(row, col).firstChild, v === undefined ? '' : v);
 519                 }).defer(50, this);
 520             }
 521         }
 522     },
 523
 524     // private
 525     preEditValue : function(r, field){
 526         var value = r.data[field];
 527         return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlDecode(value) : value;
 528     },
 529
 530     // private
 531         postEditValue : function(value, originalValue, r, field){
 532                 return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
 533         },
 534
 535     /**
 536      * Stops any active editing
 537      * @param {Boolean} cancel (optional) True to cancel any changes
 538      */
 539     stopEditing : function(cancel){
 540         if(this.activeEditor){
 541             this.activeEditor[cancel === true ? 'cancelEdit' : 'completeEdit']();
 542         }
 543         this.activeEditor = null;
 544     }
 545 });
 546 Ext.reg('editorgrid', Ext.grid.EditorGridPanel);// private
 547 // This is a support class used internally by the Grid components
 548 Ext.grid.GridEditor = function(field, config){
 549     Ext.grid.GridEditor.superclass.constructor.call(this, field, config);
 550     field.monitorTab = false;
 551 };
 552
 553 Ext.extend(Ext.grid.GridEditor, Ext.Editor, {
 554     alignment: "tl-tl",
 555     autoSize: "width",
 556     hideEl : false,
 557     cls: "x-small-editor x-grid-editor",
 558     shim:false,
 559     shadow:false
 560 });