source: trunk/web/addons/job_monarch/lib/extjs-30/pkgs/pkg-grid-editor-debug.js @ 647

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

lib/extjs-30:

  • new ExtJS 3.0
File size: 20.4 KB
Line 
1/*!
2 * Ext JS Library 3.0.0
3 * Copyright(c) 2006-2009 Ext JS, LLC
4 * licensing@extjs.com
5 * http://www.extjs.com/license
6 */
7/**
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>
16 * </ul></div>
17 * @constructor
18 * @param {Object} config The object containing the configuration of this model.
19 */
20Ext.grid.CellSelectionModel = function(config){
21    Ext.apply(this, config);
22
23    this.selection = null;
24
25    this.addEvents(
26        /**
27             * @event beforecellselect
28             * Fires before a cell is selected, return false to cancel the selection.
29             * @param {SelectionModel} this
30             * @param {Number} rowIndex The selected row index
31             * @param {Number} colIndex The selected cell index
32             */
33            "beforecellselect",
34        /**
35             * @event cellselect
36             * Fires when a cell is selected.
37             * @param {SelectionModel} this
38             * @param {Number} rowIndex The selected row index
39             * @param {Number} colIndex The selected cell index
40             */
41            "cellselect",
42        /**
43             * @event selectionchange
44             * Fires when the active selection changes.
45             * @param {SelectionModel} this
46             * @param {Object} selection null for no selection or an object with two properties
47         * <div class="mdetail-params"><ul>
48         * <li><b>cell</b> : see {@link #getSelectedCell}
49         * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record Record}
50         * which provides the data for the row containing the selection</p></li>
51         * </ul></div>
52             */
53            "selectionchange"
54    );
55
56    Ext.grid.CellSelectionModel.superclass.constructor.call(this);
57};
58
59Ext.extend(Ext.grid.CellSelectionModel, Ext.grid.AbstractSelectionModel,  {
60
61    /** @ignore */
62    initEvents : function(){
63        this.grid.on("cellmousedown", this.handleMouseDown, this);
64        this.grid.getGridEl().on(Ext.EventManager.useKeydown ? "keydown" : "keypress", this.handleKeyDown, this);
65        var view = this.grid.view;
66        view.on("refresh", this.onViewChange, this);
67        view.on("rowupdated", this.onRowUpdated, this);
68        view.on("beforerowremoved", this.clearSelections, this);
69        view.on("beforerowsinserted", this.clearSelections, this);
70        if(this.grid.isEditor){
71            this.grid.on("beforeedit", this.beforeEdit,  this);
72        }
73    },
74
75        //private
76    beforeEdit : function(e){
77        this.select(e.row, e.column, false, true, e.record);
78    },
79
80        //private
81    onRowUpdated : function(v, index, r){
82        if(this.selection && this.selection.record == r){
83            v.onCellSelect(index, this.selection.cell[1]);
84        }
85    },
86
87        //private
88    onViewChange : function(){
89        this.clearSelections(true);
90    },
91
92        /**
93     * Returns an array containing the row and column indexes of the currently selected cell
94     * (e.g., [0, 0]), or null if none selected. The array has elements:
95     * <div class="mdetail-params"><ul>
96     * <li><b>rowIndex</b> : Number<p class="sub-desc">The index of the selected row</p></li>
97     * <li><b>cellIndex</b> : Number<p class="sub-desc">The index of the selected cell.
98     * Due to possible column reordering, the cellIndex should <b>not</b> be used as an
99     * index into the Record's data. Instead, use the cellIndex to determine the <i>name</i>
100     * of the selected cell and use the field name to retrieve the data value from the record:<pre><code>
101// get name
102var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
103// get data value based on name
104var data = record.get(fieldName);
105     * </code></pre></p></li>
106     * </ul></div>
107     * @return {Array} An array containing the row and column indexes of the selected cell, or null if none selected.
108         */
109    getSelectedCell : function(){
110        return this.selection ? this.selection.cell : null;
111    },
112
113    /**
114     * If anything is selected, clears all selections and fires the selectionchange event.
115     * @param {Boolean} preventNotify <tt>true</tt> to prevent the gridview from
116     * being notified about the change.
117     */
118    clearSelections : function(preventNotify){
119        var s = this.selection;
120        if(s){
121            if(preventNotify !== true){
122                this.grid.view.onCellDeselect(s.cell[0], s.cell[1]);
123            }
124            this.selection = null;
125            this.fireEvent("selectionchange", this, null);
126        }
127    },
128
129    /**
130     * Returns <tt>true</tt> if there is a selection.
131     * @return {Boolean}
132     */
133    hasSelection : function(){
134        return this.selection ? true : false;
135    },
136
137    /** @ignore */
138    handleMouseDown : function(g, row, cell, e){
139        if(e.button !== 0 || this.isLocked()){
140            return;
141        }
142        this.select(row, cell);
143    },
144
145    /**
146     * Selects a cell.  Before selecting a cell, fires the
147     * {@link #beforecellselect} event.  If this check is satisfied the cell
148     * will be selected and followed up by  firing the {@link #cellselect} and
149     * {@link #selectionchange} events.
150     * @param {Number} rowIndex The index of the row to select
151     * @param {Number} colIndex The index of the column to select
152     * @param {Boolean} preventViewNotify (optional) Specify <tt>true</tt> to
153     * prevent notifying the view (disables updating the selected appearance)
154     * @param {Boolean} preventFocus (optional) Whether to prevent the cell at
155     * the specified rowIndex / colIndex from being focused.
156     * @param {Ext.data.Record} r (optional) The record to select
157     */
158    select : function(rowIndex, colIndex, preventViewNotify, preventFocus, /*internal*/ r){
159        if(this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false){
160            this.clearSelections();
161            r = r || this.grid.store.getAt(rowIndex);
162            this.selection = {
163                record : r,
164                cell : [rowIndex, colIndex]
165            };
166            if(!preventViewNotify){
167                var v = this.grid.getView();
168                v.onCellSelect(rowIndex, colIndex);
169                if(preventFocus !== true){
170                    v.focusCell(rowIndex, colIndex);
171                }
172            }
173            this.fireEvent("cellselect", this, rowIndex, colIndex);
174            this.fireEvent("selectionchange", this, this.selection);
175        }
176    },
177
178        //private
179    isSelectable : function(rowIndex, colIndex, cm){
180        return !cm.isHidden(colIndex);
181    },
182
183    /** @ignore */
184    handleKeyDown : function(e){
185        if(!e.isNavKeyPress()){
186            return;
187        }
188        var g = this.grid, s = this.selection;
189        if(!s){
190            e.stopEvent();
191            var cell = g.walkCells(0, 0, 1, this.isSelectable,  this);
192            if(cell){
193                this.select(cell[0], cell[1]);
194            }
195            return;
196        }
197        var sm = this;
198        var walk = function(row, col, step){
199            return g.walkCells(row, col, step, sm.isSelectable,  sm);
200        };
201        var k = e.getKey(), r = s.cell[0], c = s.cell[1];
202        var newCell;
203
204        switch(k){
205             case e.TAB:
206                 if(e.shiftKey){
207                     newCell = walk(r, c-1, -1);
208                 }else{
209                     newCell = walk(r, c+1, 1);
210                 }
211             break;
212             case e.DOWN:
213                 newCell = walk(r+1, c, 1);
214             break;
215             case e.UP:
216                 newCell = walk(r-1, c, -1);
217             break;
218             case e.RIGHT:
219                 newCell = walk(r, c+1, 1);
220             break;
221             case e.LEFT:
222                 newCell = walk(r, c-1, -1);
223             break;
224             case e.ENTER:
225                 if(g.isEditor && !g.editing){
226                    g.startEditing(r, c);
227                    e.stopEvent();
228                    return;
229                }
230             break;
231        }
232        if(newCell){
233            this.select(newCell[0], newCell[1]);
234            e.stopEvent();
235        }
236    },
237
238    acceptsNav : function(row, col, cm){
239        return !cm.isHidden(col) && cm.isCellEditable(col, row);
240    },
241
242    onEditorKey : function(field, e){
243        var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
244        if(k == e.TAB){
245            if(e.shiftKey){
246                newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
247            }else{
248                newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
249            }
250            e.stopEvent();
251        }else if(k == e.ENTER){
252            ed.completeEdit();
253            e.stopEvent();
254        }else if(k == e.ESC){
255                e.stopEvent();
256            ed.cancelEdit();
257        }
258        if(newCell){
259            g.startEditing(newCell[0], newCell[1]);
260        }
261    }
262});/**
263 * @class Ext.grid.EditorGridPanel
264 * @extends Ext.grid.GridPanel
265 * <p>This class extends the {@link Ext.grid.GridPanel GridPanel Class} to provide cell editing
266 * on selected {@link Ext.grid.Column columns}. The editable columns are specified by providing
267 * an {@link Ext.grid.ColumnModel#editor editor} in the {@link Ext.grid.Column column configuration}.</p>
268 * <p>Editability of columns may be controlled programatically by inserting an implementation
269 * of {@link Ext.grid.ColumnModel#isCellEditable isCellEditable} into the
270 * {@link Ext.grid.ColumnModel ColumnModel}.</p>
271 * <p>Editing is performed on the value of the <i>field</i> specified by the column's
272 * <tt>{@link Ext.grid.ColumnModel#dataIndex dataIndex}</tt> in the backing {@link Ext.data.Store Store}
273 * (so if you are using a {@link Ext.grid.ColumnModel#setRenderer renderer} in order to display
274 * transformed data, this must be accounted for).</p>
275 * <p>If a value-to-description mapping is used to render a column, then a {@link Ext.form.Field#ComboBox ComboBox}
276 * which uses the same {@link Ext.form.Field#valueField value}-to-{@link Ext.form.Field#displayFieldField description}
277 * mapping would be an appropriate editor.</p>
278 * If there is a more complex mismatch between the visible data in the grid, and the editable data in
279 * the {@link Edt.data.Store Store}, then code to transform the data both before and after editing can be
280 * injected using the {@link #beforeedit} and {@link #afteredit} events.
281 * @constructor
282 * @param {Object} config The config object
283 * @xtype editorgrid
284 */
285Ext.grid.EditorGridPanel = Ext.extend(Ext.grid.GridPanel, {
286    /**
287     * @cfg {Number} clicksToEdit
288     * <p>The number of clicks on a cell required to display the cell's editor (defaults to 2).</p>
289     * <p>Setting this option to 'auto' means that mousedown <i>on the selected cell</i> starts
290     * editing that cell.</p>
291     */
292    clicksToEdit: 2,
293   
294    /**
295    * @cfg {Boolean} forceValidation
296    * True to force validation even if the value is unmodified (defaults to false)
297    */
298    forceValidation: false,
299
300    // private
301    isEditor : true,
302    // private
303    detectEdit: false,
304
305        /**
306         * @cfg {Boolean} autoEncode
307         * True to automatically HTML encode and decode values pre and post edit (defaults to false)
308         */
309        autoEncode : false,
310
311        /**
312         * @cfg {Boolean} trackMouseOver @hide
313         */
314    // private
315    trackMouseOver: false, // causes very odd FF errors
316
317    // private
318    initComponent : function(){
319        Ext.grid.EditorGridPanel.superclass.initComponent.call(this);
320
321        if(!this.selModel){
322            /**
323             * @cfg {Object} selModel Any subclass of AbstractSelectionModel that will provide the selection model for
324             * the grid (defaults to {@link Ext.grid.CellSelectionModel} if not specified).
325             */
326            this.selModel = new Ext.grid.CellSelectionModel();
327        }
328
329        this.activeEditor = null;
330
331            this.addEvents(
332            /**
333             * @event beforeedit
334             * Fires before cell editing is triggered. The edit event object has the following properties <br />
335             * <ul style="padding:5px;padding-left:16px;">
336             * <li>grid - This grid</li>
337             * <li>record - The record being edited</li>
338             * <li>field - The field name being edited</li>
339             * <li>value - The value for the field being edited.</li>
340             * <li>row - The grid row index</li>
341             * <li>column - The grid column index</li>
342             * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
343             * </ul>
344             * @param {Object} e An edit event (see above for description)
345             */
346            "beforeedit",
347            /**
348             * @event afteredit
349             * Fires after a cell is edited. The edit event object has the following properties <br />
350             * <ul style="padding:5px;padding-left:16px;">
351             * <li>grid - This grid</li>
352             * <li>record - The record being edited</li>
353             * <li>field - The field name being edited</li>
354             * <li>value - The value being set</li>
355             * <li>originalValue - The original value for the field, before the edit.</li>
356             * <li>row - The grid row index</li>
357             * <li>column - The grid column index</li>
358             * </ul>
359             *
360             * <pre><code>
361grid.on('afteredit', afterEdit, this );
362
363function afterEdit(e) {
364    // execute an XHR to send/commit data to the server, in callback do (if successful):
365    e.record.commit();
366};
367             * </code></pre>
368             * @param {Object} e An edit event (see above for description)
369             */
370            "afteredit",
371            /**
372             * @event validateedit
373             * Fires after a cell is edited, but before the value is set in the record. Return false
374             * to cancel the change. The edit event object has the following properties <br />
375             * <ul style="padding:5px;padding-left:16px;">
376             * <li>grid - This grid</li>
377             * <li>record - The record being edited</li>
378             * <li>field - The field name being edited</li>
379             * <li>value - The value being set</li>
380             * <li>originalValue - The original value for the field, before the edit.</li>
381             * <li>row - The grid row index</li>
382             * <li>column - The grid column index</li>
383             * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
384             * </ul>
385             * Usage example showing how to remove the red triangle (dirty record indicator) from some
386             * records (not all).  By observing the grid's validateedit event, it can be cancelled if
387             * the edit occurs on a targeted row (for example) and then setting the field's new value
388             * in the Record directly:
389             * <pre><code>
390grid.on('validateedit', function(e) {
391  var myTargetRow = 6;
392 
393  if (e.row == myTargetRow) {
394    e.cancel = true;
395    e.record.data[e.field] = e.value;
396  }
397});
398             * </code></pre>
399             * @param {Object} e An edit event (see above for description)
400             */
401            "validateedit"
402        );
403    },
404
405    // private
406    initEvents : function(){
407        Ext.grid.EditorGridPanel.superclass.initEvents.call(this);
408
409        this.on("bodyscroll", this.stopEditing, this, [true]);
410        this.on("columnresize", this.stopEditing, this, [true]);
411
412        if(this.clicksToEdit == 1){
413            this.on("cellclick", this.onCellDblClick, this);
414        }else {
415            if(this.clicksToEdit == 'auto' && this.view.mainBody){
416                this.view.mainBody.on("mousedown", this.onAutoEditClick, this);
417            }
418            this.on("celldblclick", this.onCellDblClick, this);
419        }
420    },
421
422    // private
423    onCellDblClick : function(g, row, col){
424        this.startEditing(row, col);
425    },
426
427    // private
428    onAutoEditClick : function(e, t){
429        if(e.button !== 0){
430            return;
431        }
432        var row = this.view.findRowIndex(t);
433        var col = this.view.findCellIndex(t);
434        if(row !== false && col !== false){
435            this.stopEditing();
436            if(this.selModel.getSelectedCell){ // cell sm
437                var sc = this.selModel.getSelectedCell();
438                if(sc && sc[0] === row && sc[1] === col){
439                    this.startEditing(row, col);
440                }
441            }else{
442                if(this.selModel.isSelected(row)){
443                    this.startEditing(row, col);
444                }
445            }
446        }
447    },
448
449    // private
450    onEditComplete : function(ed, value, startValue){
451        this.editing = false;
452        this.activeEditor = null;
453        ed.un("specialkey", this.selModel.onEditorKey, this.selModel);
454                var r = ed.record;
455        var field = this.colModel.getDataIndex(ed.col);
456        value = this.postEditValue(value, startValue, r, field);
457        if(this.forceValidation === true || String(value) !== String(startValue)){
458            var e = {
459                grid: this,
460                record: r,
461                field: field,
462                originalValue: startValue,
463                value: value,
464                row: ed.row,
465                column: ed.col,
466                cancel:false
467            };
468            if(this.fireEvent("validateedit", e) !== false && !e.cancel && String(value) !== String(startValue)){
469                r.set(field, e.value);
470                delete e.cancel;
471                this.fireEvent("afteredit", e);
472            }
473        }
474        this.view.focusCell(ed.row, ed.col);
475    },
476
477    /**
478     * Starts editing the specified for the specified row/column
479     * @param {Number} rowIndex
480     * @param {Number} colIndex
481     */
482    startEditing : function(row, col){
483        this.stopEditing();
484        if(this.colModel.isCellEditable(col, row)){
485            this.view.ensureVisible(row, col, true);
486            var r = this.store.getAt(row);
487            var field = this.colModel.getDataIndex(col);
488            var e = {
489                grid: this,
490                record: r,
491                field: field,
492                value: r.data[field],
493                row: row,
494                column: col,
495                cancel:false
496            };
497            if(this.fireEvent("beforeedit", e) !== false && !e.cancel){
498                this.editing = true;
499                var ed = this.colModel.getCellEditor(col, row);
500                if(!ed){
501                    return;
502                }
503                if(!ed.rendered){
504                    ed.render(this.view.getEditorParent(ed));
505                }
506                (function(){ // complex but required for focus issues in safari, ie and opera
507                    ed.row = row;
508                    ed.col = col;
509                    ed.record = r;
510                    ed.on("complete", this.onEditComplete, this, {single: true});
511                    ed.on("specialkey", this.selModel.onEditorKey, this.selModel);
512                    /**
513                     * The currently active editor or null
514                      * @type Ext.Editor
515                     */
516                    this.activeEditor = ed;
517                    var v = this.preEditValue(r, field);
518                    ed.startEdit(this.view.getCell(row, col).firstChild, v === undefined ? '' : v);
519                }).defer(50, this);
520            }
521        }
522    },
523
524    // private
525    preEditValue : function(r, field){
526        var value = r.data[field];
527        return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlDecode(value) : value;
528    },
529
530    // private
531        postEditValue : function(value, originalValue, r, field){
532                return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
533        },
534
535    /**
536     * Stops any active editing
537     * @param {Boolean} cancel (optional) True to cancel any changes
538     */
539    stopEditing : function(cancel){
540        if(this.activeEditor){
541            this.activeEditor[cancel === true ? 'cancelEdit' : 'completeEdit']();
542        }
543        this.activeEditor = null;
544    }
545});
546Ext.reg('editorgrid', Ext.grid.EditorGridPanel);// private
547// This is a support class used internally by the Grid components
548Ext.grid.GridEditor = function(field, config){
549    Ext.grid.GridEditor.superclass.constructor.call(this, field, config);
550    field.monitorTab = false;
551};
552
553Ext.extend(Ext.grid.GridEditor, Ext.Editor, {
554    alignment: "tl-tl",
555    autoSize: "width",
556    hideEl : false,
557    cls: "x-small-editor x-grid-editor",
558    shim:false,
559    shadow:false
560});
Note: See TracBrowser for help on using the repository browser.