src/widgets/grid/CellSelectionModel.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 });