docs/source/CellSelectionModel.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js"><div id="cls-Ext.grid.CellSelectionModel"></div>/**
   9  * @class Ext.grid.CellSelectionModel
  10  * @extends Ext.grid.AbstractSelectionModel
  11  * This class provides the basic implementation for <i>single</i> <b>cell</b> selection in a grid.
  12  * The object stored as the selection contains the following properties:
  13  * <div class="mdetail-params"><ul>
  14  * <li><b>cell</b> : see {@link #getSelectedCell}
  15  * <li><b>record</b> : Ext.data.record The {@link Ext.data.Record Record}
  16  * which provides the data for the row containing the selection</li>
  17  * </ul></div>
  18  * @constructor
  19  * @param {Object} config The object containing the configuration of this model.
  20  */
  21 Ext.grid.CellSelectionModel = function(config){
  22     Ext.apply(this, config);
  23
  24     this.selection = null;
  25
  26     this.addEvents(
  27         <div id="event-Ext.grid.CellSelectionModel-beforecellselect"></div>/**
  28              * @event beforecellselect
  29              * Fires before a cell is selected, return false to cancel the selection.
  30              * @param {SelectionModel} this
  31              * @param {Number} rowIndex The selected row index
  32              * @param {Number} colIndex The selected cell index
  33              */
  34             "beforecellselect",
  35         <div id="event-Ext.grid.CellSelectionModel-cellselect"></div>/**
  36              * @event cellselect
  37              * Fires when a cell is selected.
  38              * @param {SelectionModel} this
  39              * @param {Number} rowIndex The selected row index
  40              * @param {Number} colIndex The selected cell index
  41              */
  42             "cellselect",
  43         <div id="event-Ext.grid.CellSelectionModel-selectionchange"></div>/**
  44              * @event selectionchange
  45              * Fires when the active selection changes.
  46              * @param {SelectionModel} this
  47              * @param {Object} selection null for no selection or an object with two properties
  48          * <div class="mdetail-params"><ul>
  49          * <li><b>cell</b> : see {@link #getSelectedCell}
  50          * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record Record}
  51          * which provides the data for the row containing the selection</p></li>
  52          * </ul></div>
  53              */
  54             "selectionchange"
  55     );
  56
  57     Ext.grid.CellSelectionModel.superclass.constructor.call(this);
  58 };
  59
  60 Ext.extend(Ext.grid.CellSelectionModel, Ext.grid.AbstractSelectionModel,  {
  61
  62     /** @ignore */
  63     initEvents : function(){
  64         this.grid.on("cellmousedown", this.handleMouseDown, this);
  65         this.grid.getGridEl().on(Ext.EventManager.useKeydown ? "keydown" : "keypress", this.handleKeyDown, this);
  66         var view = this.grid.view;
  67         view.on("refresh", this.onViewChange, this);
  68         view.on("rowupdated", this.onRowUpdated, this);
  69         view.on("beforerowremoved", this.clearSelections, this);
  70         view.on("beforerowsinserted", this.clearSelections, this);
  71         if(this.grid.isEditor){
  72             this.grid.on("beforeedit", this.beforeEdit,  this);
  73         }
  74     },
  75
  76         //private
  77     beforeEdit : function(e){
  78         this.select(e.row, e.column, false, true, e.record);
  79     },
  80
  81         //private
  82     onRowUpdated : function(v, index, r){
  83         if(this.selection && this.selection.record == r){
  84             v.onCellSelect(index, this.selection.cell[1]);
  85         }
  86     },
  87
  88         //private
  89     onViewChange : function(){
  90         this.clearSelections(true);
  91     },
  92
  93         <div id="method-Ext.grid.CellSelectionModel-getSelectedCell"></div>/**
  94      * Returns an array containing the row and column indexes of the currently selected cell
  95      * (e.g., [0, 0]), or null if none selected. The array has elements:
  96      * <div class="mdetail-params"><ul>
  97      * <li><b>rowIndex</b> : Number<p class="sub-desc">The index of the selected row</p></li>
  98      * <li><b>cellIndex</b> : Number<p class="sub-desc">The index of the selected cell.
  99      * Due to possible column reordering, the cellIndex should <b>not</b> be used as an
 100      * index into the Record's data. Instead, use the cellIndex to determine the <i>name</i>
 101      * of the selected cell and use the field name to retrieve the data value from the record:<pre><code>
 102 // get name
 103 var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
 104 // get data value based on name
 105 var data = record.get(fieldName);
 106      * </code></pre></p></li>
 107      * </ul></div>
 108      * @return {Array} An array containing the row and column indexes of the selected cell, or null if none selected.
 109          */
 110     getSelectedCell : function(){
 111         return this.selection ? this.selection.cell : null;
 112     },
 113
 114     <div id="method-Ext.grid.CellSelectionModel-clearSelections"></div>/**
 115      * If anything is selected, clears all selections and fires the selectionchange event.
 116      * @param {Boolean} preventNotify <tt>true</tt> to prevent the gridview from
 117      * being notified about the change.
 118      */
 119     clearSelections : function(preventNotify){
 120         var s = this.selection;
 121         if(s){
 122             if(preventNotify !== true){
 123                 this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
 124             }
 125             this.selection = null;
 126             this.fireEvent("selectionchange", this, null);
 127         }
 128     },
 129
 130     <div id="method-Ext.grid.CellSelectionModel-hasSelection"></div>/**
 131      * Returns <tt>true</tt> if there is a selection.
 132      * @return {Boolean}
 133      */
 134     hasSelection : function(){
 135         return this.selection ? true : false;
 136     },
 137
 138     /** @ignore */
 139     handleMouseDown : function(g, row, cell, e){
 140         if(e.button !== 0 || this.isLocked()){
 141             return;
 142         }
 143         this.select(row, cell);
 144     },
 145
 146     <div id="method-Ext.grid.CellSelectionModel-select"></div>/**
 147      * Selects a cell.  Before selecting a cell, fires the
 148      * {@link #beforecellselect} event.  If this check is satisfied the cell
 149      * will be selected and followed up by  firing the {@link #cellselect} and
 150      * {@link #selectionchange} events.
 151      * @param {Number} rowIndex The index of the row to select
 152      * @param {Number} colIndex The index of the column to select
 153      * @param {Boolean} preventViewNotify (optional) Specify <tt>true</tt> to
 154      * prevent notifying the view (disables updating the selected appearance)
 155      * @param {Boolean} preventFocus (optional) Whether to prevent the cell at
 156      * the specified rowIndex / colIndex from being focused.
 157      * @param {Ext.data.Record} r (optional) The record to select
 158      */
 159     select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
 160         if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
 161             this.clearSelections();
 162             r = r || this.grid.store.getAt(rowIndex);
 163             this.selection = {
 164                 record : r,
 165                 cell : [rowIndex, colIndex]
 166             };
 167             if(!preventViewNotify){
 168                 var v = this.grid.getView();
 169                 v.onCellSelect(rowIndex, colIndex);
 170                 if(preventFocus !== true){
 171                     v.focusCell(rowIndex, colIndex);
 172                 }
 173             }
 174             this.fireEvent("cellselect", this, rowIndex, colIndex);
 175             this.fireEvent("selectionchange", this, this.selection);
 176         }
 177     },
 178
 179         //private
 180     isSelectable : function(rowIndex, colIndex, cm){
 181         return !cm.isHidden(colIndex);
 182     },
 183
 184     /** @ignore */
 185     handleKeyDown : function(e){
 186         if(!e.isNavKeyPress()){
 187             return;
 188         }
 189         var g = this.grid, s = this.selection;
 190         if(!s){
 191             e.stopEvent();
 192             var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
 193             if(cell){
 194                 this.select(cell[0], cell[1]);
 195             }
 196             return;
 197         }
 198         var sm = this;
 199         var walk = function(row, col, step){
 200             return g.walkCells(row, col, step, sm.isSelectable,  sm);
 201         };
 202         var k = e.getKey(), r = s.cell[0], c = s.cell[1];
 203         var newCell;
 204
 205         switch(k){
 206              case e.TAB:
 207                  if(e.shiftKey){
 208                      newCell = walk(r, c-1, -1);
 209                  }else{
 210                      newCell = walk(r, c+1, 1);
 211                  }
 212              break;
 213              case e.DOWN:
 214                  newCell = walk(r+1, c, 1);
 215              break;
 216              case e.UP:
 217                  newCell = walk(r-1, c, -1);
 218              break;
 219              case e.RIGHT:
 220                  newCell = walk(r, c+1, 1);
 221              break;
 222              case e.LEFT:
 223                  newCell = walk(r, c-1, -1);
 224              break;
 225              case e.ENTER:
 226                  if(g.isEditor && !g.editing){
 227                     g.startEditing(r, c);
 228                     e.stopEvent();
 229                     return;
 230                 }
 231              break;
 232         }
 233         if(newCell){
 234             this.select(newCell[0], newCell[1]);
 235             e.stopEvent();
 236         }
 237     },
 238
 239     acceptsNav : function(row, col, cm){
 240         return !cm.isHidden(col) && cm.isCellEditable(col, row);
 241     },
 242
 243     onEditorKey : function(field, e){
 244         var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
 245         if(k == e.TAB){
 246             if(e.shiftKey){
 247                 newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
 248             }else{
 249                 newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
 250             }
 251             e.stopEvent();
 252         }else if(k == e.ENTER){
 253             ed.completeEdit();
 254             e.stopEvent();
 255         }else if(k == e.ESC){
 256                 e.stopEvent();
 257             ed.cancelEdit();
 258         }
 259         if(newCell){
 260             g.startEditing(newCell[0], newCell[1]);
 261         }
 262     }
 263 });</pre>    \r
 264 </body>\r
 265 </html>