X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/pkgs/pkg-grid-editor-debug.js diff --git a/pkgs/pkg-grid-editor-debug.js b/pkgs/pkg-grid-editor-debug.js new file mode 100644 index 00000000..6d7b49f1 --- /dev/null +++ b/pkgs/pkg-grid-editor-debug.js @@ -0,0 +1,560 @@ +/*! + * Ext JS Library 3.0.0 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** + * @class Ext.grid.CellSelectionModel + * @extends Ext.grid.AbstractSelectionModel + * This class provides the basic implementation for single cell selection in a grid. + * The object stored as the selection contains the following properties: + *
+ * @constructor + * @param {Object} config The object containing the configuration of this model. + */ +Ext.grid.CellSelectionModel = function(config){ + Ext.apply(this, config); + + this.selection = null; + + this.addEvents( + /** + * @event beforecellselect + * Fires before a cell is selected, return false to cancel the selection. + * @param {SelectionModel} this + * @param {Number} rowIndex The selected row index + * @param {Number} colIndex The selected cell index + */ + "beforecellselect", + /** + * @event cellselect + * Fires when a cell is selected. + * @param {SelectionModel} this + * @param {Number} rowIndex The selected row index + * @param {Number} colIndex The selected cell index + */ + "cellselect", + /** + * @event selectionchange + * Fires when the active selection changes. + * @param {SelectionModel} this + * @param {Object} selection null for no selection or an object with two properties + *
+ */ + "selectionchange" + ); + + Ext.grid.CellSelectionModel.superclass.constructor.call(this); +}; + +Ext.extend(Ext.grid.CellSelectionModel, Ext.grid.AbstractSelectionModel, { + + /** @ignore */ + initEvents : function(){ + this.grid.on("cellmousedown", this.handleMouseDown, this); + this.grid.getGridEl().on(Ext.EventManager.useKeydown ? "keydown" : "keypress", this.handleKeyDown, this); + var view = this.grid.view; + view.on("refresh", this.onViewChange, this); + view.on("rowupdated", this.onRowUpdated, this); + view.on("beforerowremoved", this.clearSelections, this); + view.on("beforerowsinserted", this.clearSelections, this); + if(this.grid.isEditor){ + this.grid.on("beforeedit", this.beforeEdit, this); + } + }, + + //private + beforeEdit : function(e){ + this.select(e.row, e.column, false, true, e.record); + }, + + //private + onRowUpdated : function(v, index, r){ + if(this.selection && this.selection.record == r){ + v.onCellSelect(index, this.selection.cell[1]); + } + }, + + //private + onViewChange : function(){ + this.clearSelections(true); + }, + + /** + * Returns an array containing the row and column indexes of the currently selected cell + * (e.g., [0, 0]), or null if none selected. The array has elements: + *
+ * @return {Array} An array containing the row and column indexes of the selected cell, or null if none selected. + */ + getSelectedCell : function(){ + return this.selection ? this.selection.cell : null; + }, + + /** + * If anything is selected, clears all selections and fires the selectionchange event. + * @param {Boolean} preventNotify true to prevent the gridview from + * being notified about the change. + */ + clearSelections : function(preventNotify){ + var s = this.selection; + if(s){ + if(preventNotify !== true){ + this.grid.view.onCellDeselect(s.cell[0], s.cell[1]); + } + this.selection = null; + this.fireEvent("selectionchange", this, null); + } + }, + + /** + * Returns true if there is a selection. + * @return {Boolean} + */ + hasSelection : function(){ + return this.selection ? true : false; + }, + + /** @ignore */ + handleMouseDown : function(g, row, cell, e){ + if(e.button !== 0 || this.isLocked()){ + return; + } + this.select(row, cell); + }, + + /** + * Selects a cell. Before selecting a cell, fires the + * {@link #beforecellselect} event. If this check is satisfied the cell + * will be selected and followed up by firing the {@link #cellselect} and + * {@link #selectionchange} events. + * @param {Number} rowIndex The index of the row to select + * @param {Number} colIndex The index of the column to select + * @param {Boolean} preventViewNotify (optional) Specify true to + * prevent notifying the view (disables updating the selected appearance) + * @param {Boolean} preventFocus (optional) Whether to prevent the cell at + * the specified rowIndex / colIndex from being focused. + * @param {Ext.data.Record} r (optional) The record to select + */ + select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){ + if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){ + this.clearSelections(); + r = r || this.grid.store.getAt(rowIndex); + this.selection = { + record : r, + cell : [rowIndex, colIndex] + }; + if(!preventViewNotify){ + var v = this.grid.getView(); + v.onCellSelect(rowIndex, colIndex); + if(preventFocus !== true){ + v.focusCell(rowIndex, colIndex); + } + } + this.fireEvent("cellselect", this, rowIndex, colIndex); + this.fireEvent("selectionchange", this, this.selection); + } + }, + + //private + isSelectable : function(rowIndex, colIndex, cm){ + return !cm.isHidden(colIndex); + }, + + /** @ignore */ + handleKeyDown : function(e){ + if(!e.isNavKeyPress()){ + return; + } + var g = this.grid, s = this.selection; + if(!s){ + e.stopEvent(); + var cell = g.walkCells(0, 0, 1, this.isSelectable, this); + if(cell){ + this.select(cell[0], cell[1]); + } + return; + } + var sm = this; + var walk = function(row, col, step){ + return g.walkCells(row, col, step, sm.isSelectable, sm); + }; + var k = e.getKey(), r = s.cell[0], c = s.cell[1]; + var newCell; + + switch(k){ + case e.TAB: + if(e.shiftKey){ + newCell = walk(r, c-1, -1); + }else{ + newCell = walk(r, c+1, 1); + } + break; + case e.DOWN: + newCell = walk(r+1, c, 1); + break; + case e.UP: + newCell = walk(r-1, c, -1); + break; + case e.RIGHT: + newCell = walk(r, c+1, 1); + break; + case e.LEFT: + newCell = walk(r, c-1, -1); + break; + case e.ENTER: + if(g.isEditor && !g.editing){ + g.startEditing(r, c); + e.stopEvent(); + return; + } + break; + } + if(newCell){ + this.select(newCell[0], newCell[1]); + e.stopEvent(); + } + }, + + acceptsNav : function(row, col, cm){ + return !cm.isHidden(col) && cm.isCellEditable(col, row); + }, + + onEditorKey : function(field, e){ + var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor; + if(k == e.TAB){ + if(e.shiftKey){ + newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this); + }else{ + newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this); + } + e.stopEvent(); + }else if(k == e.ENTER){ + ed.completeEdit(); + e.stopEvent(); + }else if(k == e.ESC){ + e.stopEvent(); + ed.cancelEdit(); + } + if(newCell){ + g.startEditing(newCell[0], newCell[1]); + } + } +});/** + * @class Ext.grid.EditorGridPanel + * @extends Ext.grid.GridPanel + *

This class extends the {@link Ext.grid.GridPanel GridPanel Class} to provide cell editing + * on selected {@link Ext.grid.Column columns}. The editable columns are specified by providing + * an {@link Ext.grid.ColumnModel#editor editor} in the {@link Ext.grid.Column column configuration}.

+ *

Editability of columns may be controlled programatically by inserting an implementation + * of {@link Ext.grid.ColumnModel#isCellEditable isCellEditable} into the + * {@link Ext.grid.ColumnModel ColumnModel}.

+ *

Editing is performed on the value of the field specified by the column's + * {@link Ext.grid.ColumnModel#dataIndex dataIndex} in the backing {@link Ext.data.Store Store} + * (so if you are using a {@link Ext.grid.ColumnModel#setRenderer renderer} in order to display + * transformed data, this must be accounted for).

+ *

If a value-to-description mapping is used to render a column, then a {@link Ext.form.Field#ComboBox ComboBox} + * which uses the same {@link Ext.form.Field#valueField value}-to-{@link Ext.form.Field#displayFieldField description} + * mapping would be an appropriate editor.

+ * If there is a more complex mismatch between the visible data in the grid, and the editable data in + * the {@link Edt.data.Store Store}, then code to transform the data both before and after editing can be + * injected using the {@link #beforeedit} and {@link #afteredit} events. + * @constructor + * @param {Object} config The config object + * @xtype editorgrid + */ +Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, { + /** + * @cfg {Number} clicksToEdit + *

The number of clicks on a cell required to display the cell's editor (defaults to 2).

+ *

Setting this option to 'auto' means that mousedown on the selected cell starts + * editing that cell.

+ */ + clicksToEdit: 2, + + /** + * @cfg {Boolean} forceValidation + * True to force validation even if the value is unmodified (defaults to false) + */ + forceValidation: false, + + // private + isEditor : true, + // private + detectEdit: false, + + /** + * @cfg {Boolean} autoEncode + * True to automatically HTML encode and decode values pre and post edit (defaults to false) + */ + autoEncode : false, + + /** + * @cfg {Boolean} trackMouseOver @hide + */ + // private + trackMouseOver: false, // causes very odd FF errors + + // private + initComponent : function(){ + Ext.grid.EditorGridPanel.superclass.initComponent.call(this); + + if(!this.selModel){ + /** + * @cfg {Object} selModel Any subclass of AbstractSelectionModel that will provide the selection model for + * the grid (defaults to {@link Ext.grid.CellSelectionModel} if not specified). + */ + this.selModel = new Ext.grid.CellSelectionModel(); + } + + this.activeEditor = null; + + this.addEvents( + /** + * @event beforeedit + * Fires before cell editing is triggered. The edit event object has the following properties
+ * + * @param {Object} e An edit event (see above for description) + */ + "beforeedit", + /** + * @event afteredit + * Fires after a cell is edited. The edit event object has the following properties
+ * + * + * 
 
+grid.on('afteredit', afterEdit, this );
+
+function afterEdit(e) {
+    // execute an XHR to send/commit data to the server, in callback do (if successful):
+    e.record.commit();
+}; 
+             *
+ * @param {Object} e An edit event (see above for description) + */ + "afteredit", + /** + * @event validateedit + * Fires after a cell is edited, but before the value is set in the record. Return false + * to cancel the change. The edit event object has the following properties
+ * + * Usage example showing how to remove the red triangle (dirty record indicator) from some + * records (not all). By observing the grid's validateedit event, it can be cancelled if + * the edit occurs on a targeted row (for example) and then setting the field's new value + * in the Record directly: + * 
 
+grid.on('validateedit', function(e) {
+  var myTargetRow = 6;
+ 
+  if (e.row == myTargetRow) {
+    e.cancel = true;
+    e.record.data[e.field] = e.value;
+  }
+});
+             *
+ * @param {Object} e An edit event (see above for description) + */ + "validateedit" + ); + }, + + // private + initEvents : function(){ + Ext.grid.EditorGridPanel.superclass.initEvents.call(this); + + this.on("bodyscroll", this.stopEditing, this, [true]); + this.on("columnresize", this.stopEditing, this, [true]); + + if(this.clicksToEdit == 1){ + this.on("cellclick", this.onCellDblClick, this); + }else { + if(this.clicksToEdit == 'auto' && this.view.mainBody){ + this.view.mainBody.on("mousedown", this.onAutoEditClick, this); + } + this.on("celldblclick", this.onCellDblClick, this); + } + }, + + // private + onCellDblClick : function(g, row, col){ + this.startEditing(row, col); + }, + + // private + onAutoEditClick : function(e, t){ + if(e.button !== 0){ + return; + } + var row = this.view.findRowIndex(t); + var col = this.view.findCellIndex(t); + if(row !== false && col !== false){ + this.stopEditing(); + if(this.selModel.getSelectedCell){ // cell sm + var sc = this.selModel.getSelectedCell(); + if(sc && sc[0] === row && sc[1] === col){ + this.startEditing(row, col); + } + }else{ + if(this.selModel.isSelected(row)){ + this.startEditing(row, col); + } + } + } + }, + + // private + onEditComplete : function(ed, value, startValue){ + this.editing = false; + this.activeEditor = null; + ed.un("specialkey", this.selModel.onEditorKey, this.selModel); + var r = ed.record; + var field = this.colModel.getDataIndex(ed.col); + value = this.postEditValue(value, startValue, r, field); + if(this.forceValidation === true || String(value) !== String(startValue)){ + var e = { + grid: this, + record: r, + field: field, + originalValue: startValue, + value: value, + row: ed.row, + column: ed.col, + cancel:false + }; + if(this.fireEvent("validateedit", e) !== false && !e.cancel && String(value) !== String(startValue)){ + r.set(field, e.value); + delete e.cancel; + this.fireEvent("afteredit", e); + } + } + this.view.focusCell(ed.row, ed.col); + }, + + /** + * Starts editing the specified for the specified row/column + * @param {Number} rowIndex + * @param {Number} colIndex + */ + startEditing : function(row, col){ + this.stopEditing(); + if(this.colModel.isCellEditable(col, row)){ + this.view.ensureVisible(row, col, true); + var r = this.store.getAt(row); + var field = this.colModel.getDataIndex(col); + var e = { + grid: this, + record: r, + field: field, + value: r.data[field], + row: row, + column: col, + cancel:false + }; + if(this.fireEvent("beforeedit", e) !== false && !e.cancel){ + this.editing = true; + var ed = this.colModel.getCellEditor(col, row); + if(!ed){ + return; + } + if(!ed.rendered){ + ed.render(this.view.getEditorParent(ed)); + } + (function(){ // complex but required for focus issues in safari, ie and opera + ed.row = row; + ed.col = col; + ed.record = r; + ed.on("complete", this.onEditComplete, this, {single: true}); + ed.on("specialkey", this.selModel.onEditorKey, this.selModel); + /** + * The currently active editor or null + * @type Ext.Editor + */ + this.activeEditor = ed; + var v = this.preEditValue(r, field); + ed.startEdit(this.view.getCell(row, col).firstChild, v === undefined ? '' : v); + }).defer(50, this); + } + } + }, + + // private + preEditValue : function(r, field){ + var value = r.data[field]; + return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlDecode(value) : value; + }, + + // private + postEditValue : function(value, originalValue, r, field){ + return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value; + }, + + /** + * Stops any active editing + * @param {Boolean} cancel (optional) True to cancel any changes + */ + stopEditing : function(cancel){ + if(this.activeEditor){ + this.activeEditor[cancel === true ? 'cancelEdit' : 'completeEdit'](); + } + this.activeEditor = null; + } +}); +Ext.reg('editorgrid', Ext.grid.EditorGridPanel);// private +// This is a support class used internally by the Grid components +Ext.grid.GridEditor = function(field, config){ + Ext.grid.GridEditor.superclass.constructor.call(this, field, config); + field.monitorTab = false; +}; + +Ext.extend(Ext.grid.GridEditor, Ext.Editor, { + alignment: "tl-tl", + autoSize: "width", + hideEl : false, + cls: "x-small-editor x-grid-editor", + shim:false, + shadow:false +}); \ No newline at end of file