3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
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>
18 * @param {Object} config The object containing the configuration of this model.
20 Ext.grid.CellSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, {
22 constructor : function(config){
23 Ext.apply(this, config);
25 this.selection = null;
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
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
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>
58 Ext.grid.CellSelectionModel.superclass.constructor.call(this);
62 initEvents : function(){
63 this.grid.on('cellmousedown', this.handleMouseDown, this);
64 this.grid.on(Ext.EventManager.useKeydown ? 'keydown' : 'keypress', this.handleKeyDown, this);
65 this.grid.getView().on({
67 refresh: this.onViewChange,
68 rowupdated: this.onRowUpdated,
69 beforerowremoved: this.clearSelections,
70 beforerowsinserted: this.clearSelections
72 if(this.grid.isEditor){
73 this.grid.on('beforeedit', this.beforeEdit, this);
78 beforeEdit : function(e){
79 this.select(e.row, e.column, false, true, e.record);
83 onRowUpdated : function(v, index, r){
84 if(this.selection && this.selection.record == r){
85 v.onCellSelect(index, this.selection.cell[1]);
90 onViewChange : function(){
91 this.clearSelections(true);
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>
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>
109 * @return {Array} An array containing the row and column indexes of the selected cell, or null if none selected.
111 getSelectedCell : function(){
112 return this.selection ? this.selection.cell : null;
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.
120 clearSelections : function(preventNotify){
121 var s = this.selection;
123 if(preventNotify !== true){
124 this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
126 this.selection = null;
127 this.fireEvent("selectionchange", this, null);
132 * Returns <tt>true</tt> if there is a selection.
135 hasSelection : function(){
136 return this.selection ? true : false;
140 handleMouseDown : function(g, row, cell, e){
141 if(e.button !== 0 || this.isLocked()){
144 this.select(row, cell);
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
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);
166 cell : [rowIndex, colIndex]
168 if(!preventViewNotify){
169 var v = this.grid.getView();
170 v.onCellSelect(rowIndex, colIndex);
171 if(preventFocus !== true){
172 v.focusCell(rowIndex, colIndex);
175 this.fireEvent("cellselect", this, rowIndex, colIndex);
176 this.fireEvent("selectionchange", this, this.selection);
181 isSelectable : function(rowIndex, colIndex, cm){
182 return !cm.isHidden(colIndex);
186 onEditorKey: function(field, e){
187 if(e.getKey() == e.TAB){
188 this.handleKeyDown(e);
193 handleKeyDown : function(e){
194 if(!e.isNavKeyPress()){
202 walk = function(row, col, step){
207 g.isEditor && g.editing ? sm.acceptsNav : sm.isSelectable, // *** handle tabbing while editorgrid is in edit mode
211 cell, newCell, r, c, ae;
220 // *** call e.stopEvent() only for non ESC, PAGE UP/DOWN KEYS
226 cell = walk(0, 0, 1); // *** use private walk() function defined above
228 this.select(cell[0], cell[1]);
233 cell = s.cell; // currently selected cell
234 r = cell[0]; // current row
235 c = cell[1]; // current column
240 newCell = walk(r, c - 1, -1);
242 newCell = walk(r, c + 1, 1);
246 newCell = walk(r + 1, c, 1);
249 newCell = walk(r - 1, c, -1);
252 newCell = walk(r, c + 1, 1);
255 newCell = walk(r, c - 1, -1);
258 if (g.isEditor && !g.editing) {
259 g.startEditing(r, c);
266 // *** reassign r & c variables to newly-selected cell's row and column
270 this.select(r, c); // *** highlight newly-selected cell and update selection
272 if(g.isEditor && g.editing){ // *** handle tabbing while editorgrid is in edit mode
274 if(ae && ae.field.triggerBlur){
275 // *** if activeEditor is a TriggerField, explicitly call its triggerBlur() method
276 ae.field.triggerBlur();
278 g.startEditing(r, c);
283 acceptsNav : function(row, col, cm){
284 return !cm.isHidden(col) && cm.isCellEditable(col, row);
287 * @class Ext.grid.EditorGridPanel
288 * @extends Ext.grid.GridPanel
289 * <p>This class extends the {@link Ext.grid.GridPanel GridPanel Class} to provide cell editing
290 * on selected {@link Ext.grid.Column columns}. The editable columns are specified by providing
291 * an {@link Ext.grid.ColumnModel#editor editor} in the {@link Ext.grid.Column column configuration}.</p>
292 * <p>Editability of columns may be controlled programatically by inserting an implementation
293 * of {@link Ext.grid.ColumnModel#isCellEditable isCellEditable} into the
294 * {@link Ext.grid.ColumnModel ColumnModel}.</p>
295 * <p>Editing is performed on the value of the <i>field</i> specified by the column's
296 * <tt>{@link Ext.grid.ColumnModel#dataIndex dataIndex}</tt> in the backing {@link Ext.data.Store Store}
297 * (so if you are using a {@link Ext.grid.ColumnModel#setRenderer renderer} in order to display
298 * transformed data, this must be accounted for).</p>
299 * <p>If a value-to-description mapping is used to render a column, then a {@link Ext.form.Field#ComboBox ComboBox}
300 * which uses the same {@link Ext.form.Field#valueField value}-to-{@link Ext.form.Field#displayFieldField description}
301 * mapping would be an appropriate editor.</p>
302 * If there is a more complex mismatch between the visible data in the grid, and the editable data in
303 * the {@link Edt.data.Store Store}, then code to transform the data both before and after editing can be
304 * injected using the {@link #beforeedit} and {@link #afteredit} events.
306 * @param {Object} config The config object
309 Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {
311 * @cfg {Number} clicksToEdit
312 * <p>The number of clicks on a cell required to display the cell's editor (defaults to 2).</p>
313 * <p>Setting this option to 'auto' means that mousedown <i>on the selected cell</i> starts
314 * editing that cell.</p>
319 * @cfg {Boolean} forceValidation
320 * True to force validation even if the value is unmodified (defaults to false)
322 forceValidation: false,
330 * @cfg {Boolean} autoEncode
331 * True to automatically HTML encode and decode values pre and post edit (defaults to false)
336 * @cfg {Boolean} trackMouseOver @hide
339 trackMouseOver: false, // causes very odd FF errors
342 initComponent : function(){
343 Ext.grid.EditorGridPanel.superclass.initComponent.call(this);
347 * @cfg {Object} selModel Any subclass of AbstractSelectionModel that will provide the selection model for
348 * the grid (defaults to {@link Ext.grid.CellSelectionModel} if not specified).
350 this.selModel = new Ext.grid.CellSelectionModel();
353 this.activeEditor = null;
358 * Fires before cell editing is triggered. The edit event object has the following properties <br />
359 * <ul style="padding:5px;padding-left:16px;">
360 * <li>grid - This grid</li>
361 * <li>record - The record being edited</li>
362 * <li>field - The field name being edited</li>
363 * <li>value - The value for the field being edited.</li>
364 * <li>row - The grid row index</li>
365 * <li>column - The grid column index</li>
366 * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
368 * @param {Object} e An edit event (see above for description)
373 * Fires after a cell is edited. The edit event object has the following properties <br />
374 * <ul style="padding:5px;padding-left:16px;">
375 * <li>grid - This grid</li>
376 * <li>record - The record being edited</li>
377 * <li>field - The field name being edited</li>
378 * <li>value - The value being set</li>
379 * <li>originalValue - The original value for the field, before the edit.</li>
380 * <li>row - The grid row index</li>
381 * <li>column - The grid column index</li>
385 grid.on('afteredit', afterEdit, this );
387 function afterEdit(e) {
388 // execute an XHR to send/commit data to the server, in callback do (if successful):
392 * @param {Object} e An edit event (see above for description)
396 * @event validateedit
397 * Fires after a cell is edited, but before the value is set in the record. Return false
398 * to cancel the change. The edit event object has the following properties <br />
399 * <ul style="padding:5px;padding-left:16px;">
400 * <li>grid - This grid</li>
401 * <li>record - The record being edited</li>
402 * <li>field - The field name being edited</li>
403 * <li>value - The value being set</li>
404 * <li>originalValue - The original value for the field, before the edit.</li>
405 * <li>row - The grid row index</li>
406 * <li>column - The grid column index</li>
407 * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
409 * Usage example showing how to remove the red triangle (dirty record indicator) from some
410 * records (not all). By observing the grid's validateedit event, it can be cancelled if
411 * the edit occurs on a targeted row (for example) and then setting the field's new value
412 * in the Record directly:
414 grid.on('validateedit', function(e) {
417 if (e.row == myTargetRow) {
419 e.record.data[e.field] = e.value;
423 * @param {Object} e An edit event (see above for description)
430 initEvents : function(){
431 Ext.grid.EditorGridPanel.superclass.initEvents.call(this);
433 this.getGridEl().on('mousewheel', this.stopEditing.createDelegate(this, [true]), this);
434 this.on('columnresize', this.stopEditing, this, [true]);
436 if(this.clicksToEdit == 1){
437 this.on("cellclick", this.onCellDblClick, this);
439 var view = this.getView();
440 if(this.clicksToEdit == 'auto' && view.mainBody){
441 view.mainBody.on('mousedown', this.onAutoEditClick, this);
443 this.on('celldblclick', this.onCellDblClick, this);
447 onResize : function(){
448 Ext.grid.EditorGridPanel.superclass.onResize.apply(this, arguments);
449 var ae = this.activeEditor;
450 if(this.editing && ae){
456 onCellDblClick : function(g, row, col){
457 this.startEditing(row, col);
461 onAutoEditClick : function(e, t){
465 var row = this.view.findRowIndex(t),
466 col = this.view.findCellIndex(t);
467 if(row !== false && col !== false){
469 if(this.selModel.getSelectedCell){ // cell sm
470 var sc = this.selModel.getSelectedCell();
471 if(sc && sc[0] === row && sc[1] === col){
472 this.startEditing(row, col);
475 if(this.selModel.isSelected(row)){
476 this.startEditing(row, col);
483 onEditComplete : function(ed, value, startValue){
484 this.editing = false;
485 this.lastActiveEditor = this.activeEditor;
486 this.activeEditor = null;
489 field = this.colModel.getDataIndex(ed.col);
490 value = this.postEditValue(value, startValue, r, field);
491 if(this.forceValidation === true || String(value) !== String(startValue)){
496 originalValue: startValue,
502 if(this.fireEvent("validateedit", e) !== false && !e.cancel && String(value) !== String(startValue)){
503 r.set(field, e.value);
505 this.fireEvent("afteredit", e);
508 this.view.focusCell(ed.row, ed.col);
512 * Starts editing the specified for the specified row/column
513 * @param {Number} rowIndex
514 * @param {Number} colIndex
516 startEditing : function(row, col){
518 if(this.colModel.isCellEditable(col, row)){
519 this.view.ensureVisible(row, col, true);
520 var r = this.store.getAt(row),
521 field = this.colModel.getDataIndex(col),
526 value: r.data[field],
531 if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
533 var ed = this.colModel.getCellEditor(col, row);
538 ed.parentEl = this.view.getEditorParent(ed);
543 c.field.focus(false, true);
548 specialkey: function(field, e){
549 this.getSelectionModel().onEditorKey(field, e);
551 complete: this.onEditComplete,
552 canceledit: this.stopEditing.createDelegate(this, [true])
564 this.activeEditor = ed;
565 // Set the selectSameEditor flag if we are reusing the same editor again and
566 // need to prevent the editor from firing onBlur on itself.
567 ed.selectSameEditor = (this.activeEditor == this.lastActiveEditor);
568 var v = this.preEditValue(r, field);
569 ed.startEdit(this.view.getCell(row, col).firstChild, Ext.isDefined(v) ? v : '');
571 // Clear the selectSameEditor flag
573 delete ed.selectSameEditor;
580 preEditValue : function(r, field){
581 var value = r.data[field];
582 return this.autoEncode && Ext.isString(value) ? Ext.util.Format.htmlDecode(value) : value;
586 postEditValue : function(value, originalValue, r, field){
587 return this.autoEncode && Ext.isString(value) ? Ext.util.Format.htmlEncode(value) : value;
591 * Stops any active editing
592 * @param {Boolean} cancel (optional) True to cancel any changes
594 stopEditing : function(cancel){
596 // Store the lastActiveEditor to check if it is changing
597 var ae = this.lastActiveEditor = this.activeEditor;
599 ae[cancel === true ? 'cancelEdit' : 'completeEdit']();
600 this.view.focusCell(ae.row, ae.col);
602 this.activeEditor = null;
604 this.editing = false;
607 Ext.reg('editorgrid', Ext.grid.EditorGridPanel);// private
608 // This is a support class used internally by the Grid components
609 Ext.grid.GridEditor = function(field, config){
610 Ext.grid.GridEditor.superclass.constructor.call(this, field, config);
611 field.monitorTab = false;
614 Ext.extend(Ext.grid.GridEditor, Ext.Editor, {
618 cls: "x-small-editor x-grid-editor",