docs/source/CellSelectionModel.html

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