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