2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * @class Ext.grid.EditorGridPanel
\r
11 * @extends Ext.grid.GridPanel
\r
12 * <p>This class extends the GridPanel to provide cell editing on selected columns.</p>
\r
13 * The editable columns are specified by providing an {@link Ext.grid.ColumnModel#editor editor}
\r
14 * in the column configuration.</p>
\r
15 * <p>Editability of columns may be controlled programatically by inserting an implementation
\r
16 * of {@link Ext.grid.ColumnModel#isCellEditable isCellEditable} into your ColumnModel.</p>
\r
17 * <p>Editing is performed on the value of the <i>field</i> specified by the column's
\r
18 * {@link Ext.grid.ColumnModel#dataIndex dataIndex} in the backing {@link Ext.data.Store Store}
\r
19 * (so if you are using a {@link Ext.grid.ColumnModel#setRenderer renderer} in order to display
\r
20 * transformed data, this must be accounted for).</p>
\r
21 * <p>If a value-to-description mapping is used to render a column, then a {Ext.form.Field#ComboBox ComboBox}
\r
22 * which uses the same {@link Ext.form.Field#valueField value}-to-{@link Ext.form.Field#displayFieldField description}
\r
23 * mapping would be an appropriate editor.</p>
\r
24 * If there is a more complex mismatch between the visible data in the grid, and the editable data in
\r
25 * the {@link Edt.data.Store Store}, then code to transform the data both before and after editing can be
\r
26 * injected using the {@link #beforeedit} and {@link #afteredit} events.
\r
28 * @param {Object} config The config object
\r
30 Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {
\r
32 * @cfg {Number} clicksToEdit
\r
33 * <p>The number of clicks on a cell required to display the cell's editor (defaults to 2).</p>
\r
34 * <p>Setting this option to 'auto' means that mousedown <i>on the selected cell</i> starts
\r
35 * editing that cell.</p>
\r
45 * @cfg {Boolean} autoEncode
\r
46 * True to automatically HTML encode and decode values pre and post edit (defaults to false)
\r
51 * @cfg {Boolean} trackMouseOver @hide
\r
54 trackMouseOver: false, // causes very odd FF errors
\r
57 initComponent : function(){
\r
58 Ext.grid.EditorGridPanel.superclass.initComponent.call(this);
\r
62 * @cfg {Object} selModel Any subclass of AbstractSelectionModel that will provide the selection model for
\r
63 * the grid (defaults to {@link Ext.grid.CellSelectionModel} if not specified). Note that the SelectionModel
\r
64 * must be compatible with the model of selecting cells individually, and should support a method named
\r
65 * <tt>getSelectedCell</tt> (for these reasons, {@link Ext.grid.RowSelectionModel} is not compatible).
\r
67 this.selModel = new Ext.grid.CellSelectionModel();
\r
70 this.activeEditor = null;
\r
75 * Fires before cell editing is triggered. The edit event object has the following properties <br />
\r
76 * <ul style="padding:5px;padding-left:16px;">
\r
77 * <li>grid - This grid</li>
\r
78 * <li>record - The record being edited</li>
\r
79 * <li>field - The field name being edited</li>
\r
80 * <li>value - The value for the field being edited.</li>
\r
81 * <li>row - The grid row index</li>
\r
82 * <li>column - The grid column index</li>
\r
83 * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
\r
85 * @param {Object} e An edit event (see above for description)
\r
90 * Fires after a cell is edited. The edit event object has the following properties <br />
\r
91 * <ul style="padding:5px;padding-left:16px;">
\r
92 * <li>grid - This grid</li>
\r
93 * <li>record - The record being edited</li>
\r
94 * <li>field - The field name being edited</li>
\r
95 * <li>value - The value being set</li>
\r
96 * <li>originalValue - The original value for the field, before the edit.</li>
\r
97 * <li>row - The grid row index</li>
\r
98 * <li>column - The grid column index</li>
\r
100 * @param {Object} e An edit event (see above for description)
\r
104 * @event validateedit
\r
105 * Fires after a cell is edited, but before the value is set in the record. Return false
\r
106 * to cancel the change. The edit event object has the following properties <br />
\r
107 * <ul style="padding:5px;padding-left:16px;">
\r
108 * <li>grid - This grid</li>
\r
109 * <li>record - The record being edited</li>
\r
110 * <li>field - The field name being edited</li>
\r
111 * <li>value - The value being set</li>
\r
112 * <li>originalValue - The original value for the field, before the edit.</li>
\r
113 * <li>row - The grid row index</li>
\r
114 * <li>column - The grid column index</li>
\r
115 * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
\r
117 * @param {Object} e An edit event (see above for description)
\r
124 initEvents : function(){
\r
125 Ext.grid.EditorGridPanel.superclass.initEvents.call(this);
\r
127 this.on("bodyscroll", this.stopEditing, this, [true]);
\r
128 this.on("columnresize", this.stopEditing, this, [true]);
\r
130 if(this.clicksToEdit == 1){
\r
131 this.on("cellclick", this.onCellDblClick, this);
\r
133 if(this.clicksToEdit == 'auto' && this.view.mainBody){
\r
134 this.view.mainBody.on("mousedown", this.onAutoEditClick, this);
\r
136 this.on("celldblclick", this.onCellDblClick, this);
\r
141 onCellDblClick : function(g, row, col){
\r
142 this.startEditing(row, col);
\r
146 onAutoEditClick : function(e, t){
\r
147 if(e.button !== 0){
\r
150 var row = this.view.findRowIndex(t);
\r
151 var col = this.view.findCellIndex(t);
\r
152 if(row !== false && col !== false){
\r
153 this.stopEditing();
\r
154 if(this.selModel.getSelectedCell){ // cell sm
\r
155 var sc = this.selModel.getSelectedCell();
\r
156 if(sc && sc.cell[0] === row && sc.cell[1] === col){
\r
157 this.startEditing(row, col);
\r
160 if(this.selModel.isSelected(row)){
\r
161 this.startEditing(row, col);
\r
168 onEditComplete : function(ed, value, startValue){
\r
169 this.editing = false;
\r
170 this.activeEditor = null;
\r
171 ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
\r
173 var field = this.colModel.getDataIndex(ed.col);
\r
174 value = this.postEditValue(value, startValue, r, field);
\r
175 if(String(value) !== String(startValue)){
\r
180 originalValue: startValue,
\r
186 if(this.fireEvent("validateedit", e) !== false && !e.cancel){
\r
187 r.set(field, e.value);
\r
189 this.fireEvent("afteredit", e);
\r
192 this.view.focusCell(ed.row, ed.col);
\r
196 * Starts editing the specified for the specified row/column
\r
197 * @param {Number} rowIndex
\r
198 * @param {Number} colIndex
\r
200 startEditing : function(row, col){
\r
201 this.stopEditing();
\r
202 if(this.colModel.isCellEditable(col, row)){
\r
203 this.view.ensureVisible(row, col, true);
\r
204 var r = this.store.getAt(row);
\r
205 var field = this.colModel.getDataIndex(col);
\r
210 value: r.data[field],
\r
215 if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
\r
216 this.editing = true;
\r
217 var ed = this.colModel.getCellEditor(col, row);
\r
219 ed.render(this.view.getEditorParent(ed));
\r
221 (function(){ // complex but required for focus issues in safari, ie and opera
\r
225 ed.on("complete", this.onEditComplete, this, {single: true});
\r
226 ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
\r
228 * The currently active editor or null
\r
231 this.activeEditor = ed;
\r
232 var v = this.preEditValue(r, field);
\r
233 ed.startEdit(this.view.getCell(row, col).firstChild, v === undefined ? '' : v);
\r
234 }).defer(50, this);
\r
240 preEditValue : function(r, field){
\r
241 var value = r.data[field];
\r
242 return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlDecode(value) : value;
\r
246 postEditValue : function(value, originalValue, r, field){
\r
247 return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
\r
251 * Stops any active editing
\r
252 * @param {Boolean} cancel (optional) True to cancel any changes
\r
254 stopEditing : function(cancel){
\r
255 if(this.activeEditor){
\r
256 this.activeEditor[cancel === true ? 'cancelEdit' : 'completeEdit']();
\r
258 this.activeEditor = null;
\r
262 onDestroy: function() {
\r
264 var cols = this.colModel.config;
\r
265 for(var i = 0, len = cols.length; i < len; i++){
\r
267 Ext.destroy(c.editor);
\r
270 Ext.grid.EditorGridPanel.superclass.onDestroy.call(this);
\r
273 Ext.reg('editorgrid', Ext.grid.EditorGridPanel);