source: trunk/web/addons/job_monarch/lib/extjs/source/widgets/grid/EditorGrid.js @ 619

Last change on this file since 619 was 619, checked in by ramonb, 15 years ago

lib/:

  • added new AJAX dependancies: ExtJS, pChart, Lightbox2
File size: 10.7 KB
Line 
1/*
2 * Ext JS Library 2.2.1
3 * Copyright(c) 2006-2009, Ext JS, LLC.
4 * licensing@extjs.com
5 *
6 * http://extjs.com/license
7 */
8
9/**
10 * @class Ext.grid.EditorGridPanel
11 * @extends Ext.grid.GridPanel
12 * <p>This class extends the GridPanel to provide cell editing on selected columns.</p>
13 * The editable columns are specified by providing an {@link Ext.grid.ColumnModel#editor editor}
14 * in the column configuration.</p>
15 * <p>Editability of columns may be controlled programatically by inserting an implementation
16 * of {@link Ext.grid.ColumnModel#isCellEditable isCellEditable} into your ColumnModel.</p>
17 * <p>Editing is performed on the value of the <i>field</i> specified by the column's
18 * {@link Ext.grid.ColumnModel#dataIndex dataIndex} in the backing {@link Ext.data.Store Store}
19 * (so if you are using a {@link Ext.grid.ColumnModel#setRenderer renderer} in order to display
20 * transformed data, this must be accounted for).</p>
21 * <p>If a value-to-description mapping is used to render a column, then a {Ext.form.Field#ComboBox ComboBox}
22 * which uses the same {@link Ext.form.Field#valueField value}-to-{@link Ext.form.Field#displayFieldField description}
23 * mapping would be an appropriate editor.</p>
24 * If there is a more complex mismatch between the visible data in the grid, and the editable data in
25 * the {@link Edt.data.Store Store}, then code to transform the data both before and after editing can be
26 * injected using the {@link #beforeedit} and {@link #afteredit} events.
27 * @constructor
28 * @param {Object} config The config object
29 */
30Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {
31    /**
32     * @cfg {Number} clicksToEdit
33     * <p>The number of clicks on a cell required to display the cell's editor (defaults to 2).</p>
34     * <p>Setting this option to 'auto' means that mousedown <i>on the selected cell</i> starts
35     * editing that cell.</p>
36     */
37    clicksToEdit: 2,
38
39    // private
40    isEditor : true,
41    // private
42    detectEdit: false,
43
44        /**
45         * @cfg {Boolean} autoEncode
46         * True to automatically HTML encode and decode values pre and post edit (defaults to false)
47         */
48        autoEncode : false,
49
50        /**
51         * @cfg {Boolean} trackMouseOver @hide
52         */
53    // private
54    trackMouseOver: false, // causes very odd FF errors
55
56    // private
57    initComponent : function(){
58        Ext.grid.EditorGridPanel.superclass.initComponent.call(this);
59
60        if(!this.selModel){
61            /**
62             * @cfg {Object} selModel Any subclass of AbstractSelectionModel that will provide the selection model for
63             * the grid (defaults to {@link Ext.grid.CellSelectionModel} if not specified). Note that the SelectionModel
64             * must be compatible with the model of selecting cells individually, and should support a method named
65             * <tt>getSelectedCell</tt> (for these reasons, {@link Ext.grid.RowSelectionModel} is not compatible).
66             */
67            this.selModel = new Ext.grid.CellSelectionModel();
68        }
69
70        this.activeEditor = null;
71
72            this.addEvents(
73            /**
74             * @event beforeedit
75             * Fires before cell editing is triggered. The edit event object has the following properties <br />
76             * <ul style="padding:5px;padding-left:16px;">
77             * <li>grid - This grid</li>
78             * <li>record - The record being edited</li>
79             * <li>field - The field name being edited</li>
80             * <li>value - The value for the field being edited.</li>
81             * <li>row - The grid row index</li>
82             * <li>column - The grid column index</li>
83             * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
84             * </ul>
85             * @param {Object} e An edit event (see above for description)
86             */
87            "beforeedit",
88            /**
89             * @event afteredit
90             * Fires after a cell is edited. The edit event object has the following properties <br />
91             * <ul style="padding:5px;padding-left:16px;">
92             * <li>grid - This grid</li>
93             * <li>record - The record being edited</li>
94             * <li>field - The field name being edited</li>
95             * <li>value - The value being set</li>
96             * <li>originalValue - The original value for the field, before the edit.</li>
97             * <li>row - The grid row index</li>
98             * <li>column - The grid column index</li>
99             * </ul>
100             * @param {Object} e An edit event (see above for description)
101             */
102            "afteredit",
103            /**
104             * @event validateedit
105             * Fires after a cell is edited, but before the value is set in the record. Return false
106             * to cancel the change. The edit event object has the following properties <br />
107             * <ul style="padding:5px;padding-left:16px;">
108             * <li>grid - This grid</li>
109             * <li>record - The record being edited</li>
110             * <li>field - The field name being edited</li>
111             * <li>value - The value being set</li>
112             * <li>originalValue - The original value for the field, before the edit.</li>
113             * <li>row - The grid row index</li>
114             * <li>column - The grid column index</li>
115             * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
116             * </ul>
117             * @param {Object} e An edit event (see above for description)
118             */
119            "validateedit"
120        );
121    },
122
123    // private
124    initEvents : function(){
125        Ext.grid.EditorGridPanel.superclass.initEvents.call(this);
126
127        this.on("bodyscroll", this.stopEditing, this, [true]);
128        this.on("columnresize", this.stopEditing, this, [true]);
129
130        if(this.clicksToEdit == 1){
131            this.on("cellclick", this.onCellDblClick, this);
132        }else {
133            if(this.clicksToEdit == 'auto' && this.view.mainBody){
134                this.view.mainBody.on("mousedown", this.onAutoEditClick, this);
135            }
136            this.on("celldblclick", this.onCellDblClick, this);
137        }
138    },
139
140    // private
141    onCellDblClick : function(g, row, col){
142        this.startEditing(row, col);
143    },
144
145    // private
146    onAutoEditClick : function(e, t){
147        if(e.button !== 0){
148            return;
149        }
150        var row = this.view.findRowIndex(t);
151        var col = this.view.findCellIndex(t);
152        if(row !== false && col !== false){
153            this.stopEditing();
154            if(this.selModel.getSelectedCell){ // cell sm
155                var sc = this.selModel.getSelectedCell();
156                if(sc && sc.cell[0] === row && sc.cell[1] === col){
157                    this.startEditing(row, col);
158                }
159            }else{
160                if(this.selModel.isSelected(row)){
161                    this.startEditing(row, col);
162                }
163            }
164        }
165    },
166
167    // private
168    onEditComplete : function(ed, value, startValue){
169        this.editing = false;
170        this.activeEditor = null;
171        ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
172                var r = ed.record;
173        var field = this.colModel.getDataIndex(ed.col);
174        value = this.postEditValue(value, startValue, r, field);
175        if(String(value) !== String(startValue)){
176            var e = {
177                grid: this,
178                record: r,
179                field: field,
180                originalValue: startValue,
181                value: value,
182                row: ed.row,
183                column: ed.col,
184                cancel:false
185            };
186            if(this.fireEvent("validateedit", e) !== false && !e.cancel){
187                r.set(field, e.value);
188                delete e.cancel;
189                this.fireEvent("afteredit", e);
190            }
191        }
192        this.view.focusCell(ed.row, ed.col);
193    },
194
195    /**
196     * Starts editing the specified for the specified row/column
197     * @param {Number} rowIndex
198     * @param {Number} colIndex
199     */
200    startEditing : function(row, col){
201        this.stopEditing();
202        if(this.colModel.isCellEditable(col, row)){
203            this.view.ensureVisible(row, col, true);
204            var r = this.store.getAt(row);
205            var field = this.colModel.getDataIndex(col);
206            var e = {
207                grid: this,
208                record: r,
209                field: field,
210                value: r.data[field],
211                row: row,
212                column: col,
213                cancel:false
214            };
215            if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
216                this.editing = true;
217                var ed = this.colModel.getCellEditor(col, row);
218                if(!ed.rendered){
219                    ed.render(this.view.getEditorParent(ed));
220                }
221                (function(){ // complex but required for focus issues in safari, ie and opera
222                    ed.row = row;
223                    ed.col = col;
224                    ed.record = r;
225                    ed.on("complete", this.onEditComplete, this, {single: true});
226                    ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
227                    /**
228                     * The currently active editor or null
229                      * @type Ext.Editor
230                     */
231                    this.activeEditor = ed;
232                    var v = this.preEditValue(r, field);
233                    ed.startEdit(this.view.getCell(row, col).firstChild, v === undefined ? '' : v);
234                }).defer(50, this);
235            }
236        }
237    },
238
239    // private
240        preEditValue : function(r, field){
241        var value = r.data[field];
242                return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlDecode(value) : value;
243        },
244
245    // private
246        postEditValue : function(value, originalValue, r, field){
247                return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
248        },
249
250    /**
251     * Stops any active editing
252     * @param {Boolean} cancel (optional) True to cancel any changes
253     */
254    stopEditing : function(cancel){
255        if(this.activeEditor){
256            this.activeEditor[cancel === true ? 'cancelEdit' : 'completeEdit']();
257        }
258        this.activeEditor = null;
259    },
260
261    // private
262    onDestroy: function() {
263        if(this.rendered){
264            var cols = this.colModel.config;
265            for(var i = 0, len = cols.length; i < len; i++){
266                var c = cols[i];
267                Ext.destroy(c.editor);
268            }
269        }
270        Ext.grid.EditorGridPanel.superclass.onDestroy.call(this);
271    }
272});
273Ext.reg('editorgrid', Ext.grid.EditorGridPanel);
Note: See TracBrowser for help on using the repository browser.