+++ /dev/null
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-/**\r
- * @class Ext.grid.EditorGridPanel\r
- * @extends Ext.grid.GridPanel\r
- * <p>This class extends the GridPanel to provide cell editing on selected columns.</p>\r
- * The editable columns are specified by providing an {@link Ext.grid.ColumnModel#editor editor}\r
- * in the column configuration.</p>\r
- * <p>Editability of columns may be controlled programatically by inserting an implementation\r
- * of {@link Ext.grid.ColumnModel#isCellEditable isCellEditable} into your ColumnModel.</p>\r
- * <p>Editing is performed on the value of the <i>field</i> specified by the column's\r
- * {@link Ext.grid.ColumnModel#dataIndex dataIndex} in the backing {@link Ext.data.Store Store}\r
- * (so if you are using a {@link Ext.grid.ColumnModel#setRenderer renderer} in order to display\r
- * transformed data, this must be accounted for).</p>\r
- * <p>If a value-to-description mapping is used to render a column, then a {Ext.form.Field#ComboBox ComboBox}\r
- * which uses the same {@link Ext.form.Field#valueField value}-to-{@link Ext.form.Field#displayFieldField description}\r
- * mapping would be an appropriate editor.</p>\r
- * If there is a more complex mismatch between the visible data in the grid, and the editable data in\r
- * the {@link Edt.data.Store Store}, then code to transform the data both before and after editing can be\r
- * injected using the {@link #beforeedit} and {@link #afteredit} events.\r
- * @constructor\r
- * @param {Object} config The config object\r
- */\r
-Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {\r
- /**\r
- * @cfg {Number} clicksToEdit\r
- * <p>The number of clicks on a cell required to display the cell's editor (defaults to 2).</p>\r
- * <p>Setting this option to 'auto' means that mousedown <i>on the selected cell</i> starts\r
- * editing that cell.</p>\r
- */\r
- clicksToEdit: 2,\r
-\r
- // private\r
- isEditor : true,\r
- // private\r
- detectEdit: false,\r
-\r
- /**\r
- * @cfg {Boolean} autoEncode\r
- * True to automatically HTML encode and decode values pre and post edit (defaults to false)\r
- */\r
- autoEncode : false,\r
-\r
- /**\r
- * @cfg {Boolean} trackMouseOver @hide\r
- */\r
- // private\r
- trackMouseOver: false, // causes very odd FF errors\r
-\r
- // private\r
- initComponent : function(){\r
- Ext.grid.EditorGridPanel.superclass.initComponent.call(this);\r
-\r
- if(!this.selModel){\r
- /**\r
- * @cfg {Object} selModel Any subclass of AbstractSelectionModel that will provide the selection model for\r
- * the grid (defaults to {@link Ext.grid.CellSelectionModel} if not specified). Note that the SelectionModel\r
- * must be compatible with the model of selecting cells individually, and should support a method named\r
- * <tt>getSelectedCell</tt> (for these reasons, {@link Ext.grid.RowSelectionModel} is not compatible).\r
- */\r
- this.selModel = new Ext.grid.CellSelectionModel();\r
- }\r
-\r
- this.activeEditor = null;\r
-\r
- this.addEvents(\r
- /**\r
- * @event beforeedit\r
- * Fires before cell editing is triggered. The edit event object has the following properties <br />\r
- * <ul style="padding:5px;padding-left:16px;">\r
- * <li>grid - This grid</li>\r
- * <li>record - The record being edited</li>\r
- * <li>field - The field name being edited</li>\r
- * <li>value - The value for the field being edited.</li>\r
- * <li>row - The grid row index</li>\r
- * <li>column - The grid column index</li>\r
- * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>\r
- * </ul>\r
- * @param {Object} e An edit event (see above for description)\r
- */\r
- "beforeedit",\r
- /**\r
- * @event afteredit\r
- * Fires after a cell is edited. The edit event object has the following properties <br />\r
- * <ul style="padding:5px;padding-left:16px;">\r
- * <li>grid - This grid</li>\r
- * <li>record - The record being edited</li>\r
- * <li>field - The field name being edited</li>\r
- * <li>value - The value being set</li>\r
- * <li>originalValue - The original value for the field, before the edit.</li>\r
- * <li>row - The grid row index</li>\r
- * <li>column - The grid column index</li>\r
- * </ul>\r
- * @param {Object} e An edit event (see above for description)\r
- */\r
- "afteredit",\r
- /**\r
- * @event validateedit\r
- * Fires after a cell is edited, but before the value is set in the record. Return false\r
- * to cancel the change. The edit event object has the following properties <br />\r
- * <ul style="padding:5px;padding-left:16px;">\r
- * <li>grid - This grid</li>\r
- * <li>record - The record being edited</li>\r
- * <li>field - The field name being edited</li>\r
- * <li>value - The value being set</li>\r
- * <li>originalValue - The original value for the field, before the edit.</li>\r
- * <li>row - The grid row index</li>\r
- * <li>column - The grid column index</li>\r
- * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>\r
- * </ul>\r
- * @param {Object} e An edit event (see above for description)\r
- */\r
- "validateedit"\r
- );\r
- },\r
-\r
- // private\r
- initEvents : function(){\r
- Ext.grid.EditorGridPanel.superclass.initEvents.call(this);\r
-\r
- this.on("bodyscroll", this.stopEditing, this, [true]);\r
- this.on("columnresize", this.stopEditing, this, [true]);\r
-\r
- if(this.clicksToEdit == 1){\r
- this.on("cellclick", this.onCellDblClick, this);\r
- }else {\r
- if(this.clicksToEdit == 'auto' && this.view.mainBody){\r
- this.view.mainBody.on("mousedown", this.onAutoEditClick, this);\r
- }\r
- this.on("celldblclick", this.onCellDblClick, this);\r
- }\r
- },\r
-\r
- // private\r
- onCellDblClick : function(g, row, col){\r
- this.startEditing(row, col);\r
- },\r
-\r
- // private\r
- onAutoEditClick : function(e, t){\r
- if(e.button !== 0){\r
- return;\r
- }\r
- var row = this.view.findRowIndex(t);\r
- var col = this.view.findCellIndex(t);\r
- if(row !== false && col !== false){\r
- this.stopEditing();\r
- if(this.selModel.getSelectedCell){ // cell sm\r
- var sc = this.selModel.getSelectedCell();\r
- if(sc && sc.cell[0] === row && sc.cell[1] === col){\r
- this.startEditing(row, col);\r
- }\r
- }else{\r
- if(this.selModel.isSelected(row)){\r
- this.startEditing(row, col);\r
- }\r
- }\r
- }\r
- },\r
-\r
- // private\r
- onEditComplete : function(ed, value, startValue){\r
- this.editing = false;\r
- this.activeEditor = null;\r
- ed.un("specialkey", this.selModel.onEditorKey, this.selModel);\r
- var r = ed.record;\r
- var field = this.colModel.getDataIndex(ed.col);\r
- value = this.postEditValue(value, startValue, r, field);\r
- if(String(value) !== String(startValue)){\r
- var e = {\r
- grid: this,\r
- record: r,\r
- field: field,\r
- originalValue: startValue,\r
- value: value,\r
- row: ed.row,\r
- column: ed.col,\r
- cancel:false\r
- };\r
- if(this.fireEvent("validateedit", e) !== false && !e.cancel){\r
- r.set(field, e.value);\r
- delete e.cancel;\r
- this.fireEvent("afteredit", e);\r
- }\r
- }\r
- this.view.focusCell(ed.row, ed.col);\r
- },\r
-\r
- /**\r
- * Starts editing the specified for the specified row/column\r
- * @param {Number} rowIndex\r
- * @param {Number} colIndex\r
- */\r
- startEditing : function(row, col){\r
- this.stopEditing();\r
- if(this.colModel.isCellEditable(col, row)){\r
- this.view.ensureVisible(row, col, true);\r
- var r = this.store.getAt(row);\r
- var field = this.colModel.getDataIndex(col);\r
- var e = {\r
- grid: this,\r
- record: r,\r
- field: field,\r
- value: r.data[field],\r
- row: row,\r
- column: col,\r
- cancel:false\r
- };\r
- if(this.fireEvent("beforeedit", e) !== false && !e.cancel){\r
- this.editing = true;\r
- var ed = this.colModel.getCellEditor(col, row);\r
- if(!ed.rendered){\r
- ed.render(this.view.getEditorParent(ed));\r
- }\r
- (function(){ // complex but required for focus issues in safari, ie and opera\r
- ed.row = row;\r
- ed.col = col;\r
- ed.record = r;\r
- ed.on("complete", this.onEditComplete, this, {single: true});\r
- ed.on("specialkey", this.selModel.onEditorKey, this.selModel);\r
- /**\r
- * The currently active editor or null\r
- * @type Ext.Editor\r
- */\r
- this.activeEditor = ed;\r
- var v = this.preEditValue(r, field);\r
- ed.startEdit(this.view.getCell(row, col).firstChild, v === undefined ? '' : v);\r
- }).defer(50, this);\r
- }\r
- }\r
- },\r
-\r
- // private\r
- preEditValue : function(r, field){\r
- var value = r.data[field];\r
- return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlDecode(value) : value;\r
- },\r
-\r
- // private\r
- postEditValue : function(value, originalValue, r, field){\r
- return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;\r
- },\r
-\r
- /**\r
- * Stops any active editing\r
- * @param {Boolean} cancel (optional) True to cancel any changes\r
- */\r
- stopEditing : function(cancel){\r
- if(this.activeEditor){\r
- this.activeEditor[cancel === true ? 'cancelEdit' : 'completeEdit']();\r
- }\r
- this.activeEditor = null;\r
- },\r
-\r
- // private\r
- onDestroy: function() {\r
- if(this.rendered){\r
- var cols = this.colModel.config;\r
- for(var i = 0, len = cols.length; i < len; i++){\r
- var c = cols[i];\r
- Ext.destroy(c.editor);\r
- }\r
- }\r
- Ext.grid.EditorGridPanel.superclass.onDestroy.call(this);\r
- }\r
-});\r
-Ext.reg('editorgrid', Ext.grid.EditorGridPanel);
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff