extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/grid/plugin/DragDrop.js

@@ -0,0 +1,254 @@
+/**
+ * This plugin provides drag and/or drop functionality for a GridView.
+ *
+ * It creates a specialized instance of {@link Ext.dd.DragZone DragZone} which knows how to drag out of a {@link
+ * Ext.grid.View GridView} and loads the data object which is passed to a cooperating {@link Ext.dd.DragZone DragZone}'s
+ * methods with the following properties:
+ *
+ * - `copy` : Boolean
+ *
+ *   The value of the GridView's `copy` property, or `true` if the GridView was configured with `allowCopy: true` _and_
+ *   the control key was pressed when the drag operation was begun.
+ *
+ * - `view` : GridView
+ *
+ *   The source GridView from which the drag originated.
+ *
+ * - `ddel` : HtmlElement
+ *
+ *   The drag proxy element which moves with the mouse
+ *
+ * - `item` : HtmlElement
+ *
+ *   The GridView node upon which the mousedown event was registered.
+ *
+ * - `records` : Array
+ *
+ *   An Array of {@link Ext.data.Model Model}s representing the selected data being dragged from the source GridView.
+ *
+ * It also creates a specialized instance of {@link Ext.dd.DropZone} which cooperates with other DropZones which are
+ * members of the same ddGroup which processes such data objects.
+ *
+ * Adding this plugin to a view means that two new events may be fired from the client GridView, `{@link #beforedrop
+ * beforedrop}` and `{@link #drop drop}`
+ *
+ *     @example
+ *     Ext.create('Ext.data.Store', {
+ *         storeId:'simpsonsStore',
+ *         fields:['name'],
+ *         data: [["Lisa"], ["Bart"], ["Homer"], ["Marge"]],
+ *         proxy: {
+ *             type: 'memory',
+ *             reader: 'array'
+ *         }
+ *     });
+ *
+ *     Ext.create('Ext.grid.Panel', {
+ *         store: 'simpsonsStore',
+ *         columns: [
+ *             {header: 'Name',  dataIndex: 'name', flex: true}
+ *         ],
+ *         viewConfig: {
+ *             plugins: {
+ *                 ptype: 'gridviewdragdrop',
+ *                 dragText: 'Drag and drop to reorganize'
+ *             }
+ *         },
+ *         height: 200,
+ *         width: 400,
+ *         renderTo: Ext.getBody()
+ *     });
+ */
+Ext.define('Ext.grid.plugin.DragDrop', {
+    extend: 'Ext.AbstractPlugin',
+    alias: 'plugin.gridviewdragdrop',
+
+    uses: [
+        'Ext.view.DragZone',
+        'Ext.grid.ViewDropZone'
+    ],
+
+    /**
+     * @event beforedrop
+     * **This event is fired through the GridView. Add listeners to the GridView object**
+     *
+     * Fired when a drop gesture has been triggered by a mouseup event in a valid drop position in the GridView.
+     *
+     * @param {HTMLElement} node The GridView node **if any** over which the mouse was positioned.
+     *
+     * Returning `false` to this event signals that the drop gesture was invalid, and if the drag proxy will animate
+     * back to the point from which the drag began.
+     *
+     * Returning `0` To this event signals that the data transfer operation should not take place, but that the gesture
+     * was valid, and that the repair operation should not take place.
+     *
+     * Any other return value continues with the data transfer operation.
+     *
+     * @param {Object} data The data object gathered at mousedown time by the cooperating {@link Ext.dd.DragZone
+     * DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following properties:
+     *
+     * - copy : Boolean
+     *
+     *   The value of the GridView's `copy` property, or `true` if the GridView was configured with `allowCopy: true` and
+     *   the control key was pressed when the drag operation was begun
+     *
+     * - view : GridView
+     *
+     *   The source GridView from which the drag originated.
+     *
+     * - ddel : HtmlElement
+     *
+     *   The drag proxy element which moves with the mouse
+     *
+     * - item : HtmlElement
+     *
+     *   The GridView node upon which the mousedown event was registered.
+     *
+     * - records : Array
+     *
+     *   An Array of {@link Ext.data.Model Model}s representing the selected data being dragged from the source GridView.
+     *
+     * @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
+     *
+     * @param {String} dropPosition `"before"` or `"after"` depending on whether the mouse is above or below the midline
+     * of the node.
+     *
+     * @param {Function} dropFunction
+     *
+     * A function to call to complete the data transfer operation and either move or copy Model instances from the
+     * source View's Store to the destination View's Store.
+     *
+     * This is useful when you want to perform some kind of asynchronous processing before confirming the drop, such as
+     * an {@link Ext.window.MessageBox#confirm confirm} call, or an Ajax request.
+     *
+     * Return `0` from this event handler, and call the `dropFunction` at any time to perform the data transfer.
+     */
+
+    /**
+     * @event drop
+     * **This event is fired through the GridView. Add listeners to the GridView object** Fired when a drop operation
+     * has been completed and the data has been moved or copied.
+     *
+     * @param {HTMLElement} node The GridView node **if any** over which the mouse was positioned.
+     *
+     * @param {Object} data The data object gathered at mousedown time by the cooperating {@link Ext.dd.DragZone
+     * DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following properties:
+     *
+     * - copy : Boolean
+     *
+     *   The value of the GridView's `copy` property, or `true` if the GridView was configured with `allowCopy: true` and
+     *   the control key was pressed when the drag operation was begun
+     *
+     * - view : GridView
+     *
+     *   The source GridView from which the drag originated.
+     *
+     * - ddel : HtmlElement
+     *
+     *   The drag proxy element which moves with the mouse
+     *
+     * - item : HtmlElement
+     *
+     *   The GridView node upon which the mousedown event was registered.
+     *
+     * - records : Array
+     *
+     *   An Array of {@link Ext.data.Model Model}s representing the selected data being dragged from the source GridView.
+     *
+     * @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
+     *
+     * @param {String} dropPosition `"before"` or `"after"` depending on whether the mouse is above or below the midline
+     * of the node.
+     */
+    //<locale>
+    dragText : '{0} selected row{1}',
+    //</locale>
+
+    /**
+     * @cfg {String} ddGroup
+     * A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and
+     * DropZone used by this plugin will only interact with other drag drop objects in the same group.
+     */
+    ddGroup : "GridDD",
+
+    /**
+     * @cfg {String} dragGroup
+     * The ddGroup to which the DragZone will belong.
+     *
+     * This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other
+     * Drag/DropZones which are members of the same ddGroup.
+     */
+
+    /**
+     * @cfg {String} dropGroup
+     * The ddGroup to which the DropZone will belong.
+     *
+     * This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other
+     * Drag/DropZones which are members of the same ddGroup.
+     */
+
+    /**
+     * @cfg {Boolean} enableDrop
+     * False to disallow the View from accepting drop gestures.
+     */
+    enableDrop: true,
+
+    /**
+     * @cfg {Boolean} enableDrag
+     * False to disallow dragging items from the View.
+     */
+    enableDrag: true,
+
+    init : function(view) {
+        view.on('render', this.onViewRender, this, {single: true});
+    },
+
+    /**
+     * @private
+     * AbstractComponent calls destroy on all its plugins at destroy time.
+     */
+    destroy: function() {
+        Ext.destroy(this.dragZone, this.dropZone);
+    },
+
+    enable: function() {
+        var me = this;
+        if (me.dragZone) {
+            me.dragZone.unlock();
+        }
+        if (me.dropZone) {
+            me.dropZone.unlock();
+        }
+        me.callParent();
+    },
+
+    disable: function() {
+        var me = this;
+        if (me.dragZone) {
+            me.dragZone.lock();
+        }
+        if (me.dropZone) {
+            me.dropZone.lock();
+        }
+        me.callParent();
+    },
+
+    onViewRender : function(view) {
+        var me = this;
+
+        if (me.enableDrag) {
+            me.dragZone = new Ext.view.DragZone({
+                view: view,
+                ddGroup: me.dragGroup || me.ddGroup,
+                dragText: me.dragText
+            });
+        }
+
+        if (me.enableDrop) {
+            me.dropZone = new Ext.grid.ViewDropZone({
+                view: view,
+                ddGroup: me.dropGroup || me.ddGroup
+            });
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/grid/plugin/Editing.js

@@ -0,0 +1,561 @@
+/**
+ * This class provides an abstract grid editing plugin on selected {@link Ext.grid.column.Column columns}.
+ * The editable columns are specified by providing an {@link Ext.grid.column.Column#editor editor}
+ * in the {@link Ext.grid.column.Column column configuration}.
+ *
+ * **Note:** This class should not be used directly. See {@link Ext.grid.plugin.CellEditing} and
+ * {@link Ext.grid.plugin.RowEditing}.
+ */
+Ext.define('Ext.grid.plugin.Editing', {
+    alias: 'editing.editing',
+
+    requires: [
+        'Ext.grid.column.Column',
+        'Ext.util.KeyNav'
+    ],
+
+    mixins: {
+        observable: 'Ext.util.Observable'
+    },
+
+    /**
+     * @cfg {Number} clicksToEdit
+     * The number of clicks on a grid required to display the editor.
+     */
+    clicksToEdit: 2,
+
+    /**
+     * @cfg {String} triggerEvent
+     * The event which triggers editing. Supercedes the {@link clicksToEdit} configuration. Maybe one of:
+     *
+     *  * cellclick
+     *  * celldblclick
+     *  * cellfocus
+     *  * rowfocus
+     */
+    triggerEvent: undefined,
+
+    // private
+    defaultFieldXType: 'textfield',
+
+    // cell, row, form
+    editStyle: '',
+
+    constructor: function(config) {
+        var me = this;
+        Ext.apply(me, config);
+
+        me.addEvents(
+            /**
+             * @event beforeedit
+             * Fires before editing is triggered. Return false from event handler to stop the editing.
+             *
+             * @param {Ext.grid.plugin.Editing} editor
+             * @param {Object} e An edit event with the following properties:
+             *
+             * - grid - The grid
+             * - record - The record being edited
+             * - field - The field name being edited
+             * - value - The value for the field being edited.
+             * - row - The grid table row
+             * - column - The grid {@link Ext.grid.column.Column Column} defining the column that is being edited.
+             * - rowIdx - The row index that is being edited
+             * - colIdx - The column index that is being edited
+             * - cancel - Set this to true to cancel the edit or return false from your handler.
+             * - originalValue - Alias for value (only when using {@link Ext.grid.plugin.CellEditing CellEditing}).
+             */
+            'beforeedit',
+
+            /**
+             * @event edit
+             * Fires after a editing. Usage example:
+             *
+             *     grid.on('edit', function(editor, e) {
+             *         // commit the changes right after editing finished
+             *         e.record.commit();
+             *     });
+             *
+             * @param {Ext.grid.plugin.Editing} editor
+             * @param {Object} e An edit event with the following properties:
+             *
+             * - grid - The grid
+             * - record - The record that was edited
+             * - field - The field name that was edited
+             * - value - The value being set
+             * - row - The grid table row
+             * - column - The grid {@link Ext.grid.column.Column Column} defining the column that was edited.
+             * - rowIdx - The row index that was edited
+             * - colIdx - The column index that was edited
+             * - originalValue - The original value for the field, before the edit (only when using {@link Ext.grid.plugin.CellEditing CellEditing})
+             * - originalValues - The original values for the field, before the edit (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
+             * - newValues - The new values being set (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
+             * - view - The grid view (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
+             * - store - The grid store (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
+             */
+            'edit',
+
+            /**
+             * @event validateedit
+             * Fires after editing, but before the value is set in the record. Return false from event handler to
+             * cancel the change.
+             *
+             * 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(editor, e) {
+             *       var myTargetRow = 6;
+             *
+             *       if (e.rowIdx == myTargetRow) {
+             *         e.cancel = true;
+             *         e.record.data[e.field] = e.value;
+             *       }
+             *     });
+             *
+             * @param {Ext.grid.plugin.Editing} editor
+             * @param {Object} e An edit event with the following properties:
+             *
+             * - grid - The grid
+             * - record - The record being edited
+             * - field - The field name being edited
+             * - value - The value being set
+             * - row - The grid table row
+             * - column - The grid {@link Ext.grid.column.Column Column} defining the column that is being edited.
+             * - rowIdx - The row index that is being edited
+             * - colIdx - The column index that is being edited
+             * - cancel - Set this to true to cancel the edit or return false from your handler.
+             * - originalValue - The original value for the field, before the edit (only when using {@link Ext.grid.plugin.CellEditing CellEditing})
+             * - originalValues - The original values for the field, before the edit (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
+             * - newValues - The new values being set (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
+             * - view - The grid view (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
+             * - store - The grid store (only when using {@link Ext.grid.plugin.RowEditing RowEditing})
+             */
+            'validateedit',
+            /**
+             * @event canceledit
+             * Fires when the user started editing but then cancelled the edit.
+             * @param {Ext.grid.plugin.Editing} editor
+             * @param {Object} e An edit event with the following properties:
+             * 
+             * - grid - The grid
+             * - record - The record that was edited
+             * - field - The field name that was edited
+             * - value - The value being set
+             * - row - The grid table row
+             * - column - The grid {@link Ext.grid.column.Column Column} defining the column that was edited.
+             * - rowIdx - The row index that was edited
+             * - colIdx - The column index that was edited
+             * - view - The grid view
+             * - store - The grid store
+             */
+            'canceledit'
+
+        );
+        me.mixins.observable.constructor.call(me);
+        // TODO: Deprecated, remove in 5.0
+        me.on("edit", function(editor, e) {
+            me.fireEvent("afteredit", editor, e);
+        });
+    },
+
+    // private
+    init: function(grid) {
+        var me = this;
+
+        // If the plugin owner is a lockable grid, attach to its normal (right side) grid.
+        if (grid.lockable) {
+            grid = grid.view.normalGrid;
+        }
+        me.grid = grid;
+
+        me.view = grid.view;
+        me.initEvents();
+        me.mon(grid, 'reconfigure', me.onReconfigure, me);
+        me.onReconfigure();
+
+        grid.relayEvents(me, [
+            /**
+             * @event beforeedit
+             * Forwarded event from Ext.grid.plugin.Editing.
+             * @member Ext.panel.Table
+             * @inheritdoc Ext.grid.plugin.Editing#beforeedit
+             */
+            'beforeedit',
+            /**
+             * @event edit
+             * Forwarded event from Ext.grid.plugin.Editing.
+             * @member Ext.panel.Table
+             * @inheritdoc Ext.grid.plugin.Editing#edit
+             */
+            'edit',
+            /**
+             * @event validateedit
+             * Forwarded event from Ext.grid.plugin.Editing.
+             * @member Ext.panel.Table
+             * @inheritdoc Ext.grid.plugin.Editing#validateedit
+             */
+            'validateedit',
+            /**
+             * @event canceledit
+             * Forwarded event from Ext.grid.plugin.Editing.
+             * @member Ext.panel.Table
+             * @inheritdoc Ext.grid.plugin.Editing#canceledit
+             */
+            'canceledit'
+        ]);
+        // Marks the grid as editable, so that the SelectionModel
+        // can make appropriate decisions during navigation
+        grid.isEditable = true;
+        grid.editingPlugin = grid.view.editingPlugin = me;
+    },
+
+    /**
+     * Fires after the grid is reconfigured
+     * @private
+     */
+    onReconfigure: function(){
+        this.initFieldAccessors(this.view.getGridColumns());
+    },
+
+    /**
+     * @private
+     * AbstractComponent calls destroy on all its plugins at destroy time.
+     */
+    destroy: function() {
+        var me = this,
+            grid = me.grid;
+
+        Ext.destroy(me.keyNav);
+        me.removeFieldAccessors(grid.getView().getGridColumns());
+
+        // Clear all listeners from all our events, clear all managed listeners we added to other Observables
+        me.clearListeners();
+
+        delete me.grid.editingPlugin;
+        delete me.grid.view.editingPlugin;
+        delete me.grid;
+        delete me.view;
+        delete me.editor;
+        delete me.keyNav;
+    },
+
+    // private
+    getEditStyle: function() {
+        return this.editStyle;
+    },
+
+    // private
+    initFieldAccessors: function(columns) {
+        columns = [].concat(columns);
+
+        var me   = this,
+            c,
+            cLen = columns.length,
+            column;
+
+        for (c = 0; c < cLen; c++) {
+            column = columns[c];
+
+            Ext.applyIf(column, {
+                getEditor: function(record, defaultField) {
+                    return me.getColumnField(this, defaultField);
+                },
+
+                setEditor: function(field) {
+                    me.setColumnField(this, field);
+                }
+            });
+        }
+    },
+
+    // private
+    removeFieldAccessors: function(columns) {
+        columns = [].concat(columns);
+
+        var c,
+            cLen = columns.length,
+            column;
+
+        for (c = 0; c < cLen; c++) {
+            column = columns[c];
+
+            delete column.getEditor;
+            delete column.setEditor;
+        }
+    },
+
+    // private
+    // remaps to the public API of Ext.grid.column.Column.getEditor
+    getColumnField: function(columnHeader, defaultField) {
+        var field = columnHeader.field;
+
+        if (!field && columnHeader.editor) {
+            field = columnHeader.editor;
+            delete columnHeader.editor;
+        }
+
+        if (!field && defaultField) {
+            field = defaultField;
+        }
+
+        if (field) {
+            if (Ext.isString(field)) {
+                field = { xtype: field };
+            }
+            if (!field.isFormField) {
+                field = Ext.ComponentManager.create(field, this.defaultFieldXType);
+            }
+            columnHeader.field = field;
+ 
+            Ext.apply(field, {
+                name: columnHeader.dataIndex
+            });
+
+            return field;
+        }
+    },
+
+    // private
+    // remaps to the public API of Ext.grid.column.Column.setEditor
+    setColumnField: function(column, field) {
+        if (Ext.isObject(field) && !field.isFormField) {
+            field = Ext.ComponentManager.create(field, this.defaultFieldXType);
+        }
+        column.field = field;
+    },
+
+    // private
+    initEvents: function() {
+        var me = this;
+        me.initEditTriggers();
+        me.initCancelTriggers();
+    },
+
+    // @abstract
+    initCancelTriggers: Ext.emptyFn,
+    
+    // private
+    initEditTriggers: function() {
+        var me = this,
+            view = me.view;
+
+        // Listen for the edit trigger event.
+        if (me.triggerEvent == 'cellfocus') {
+            me.mon(view, 'cellfocus', me.onCellFocus, me);
+        } else if (me.triggerEvent == 'rowfocus') {
+            me.mon(view, 'rowfocus', me.onRowFocus, me);
+        } else {
+
+            // Prevent the View from processing when the SelectionModel focuses.
+            // This is because the SelectionModel processes the mousedown event, and
+            // focusing causes a scroll which means that the subsequent mouseup might
+            // take place at a different document XY position, and will therefore
+            // not trigger a click.
+            // This Editor must call the View's focusCell method directly when we recieve a request to edit
+            if (view.selModel.isCellModel) {
+                view.onCellFocus = Ext.Function.bind(me.beforeViewCellFocus, me);
+            }
+
+            // Listen for whichever click event we are configured to use
+            me.mon(view, me.triggerEvent || ('cell' + (me.clicksToEdit === 1 ? 'click' : 'dblclick')), me.onCellClick, me);
+        }
+        view.on('render', me.addHeaderEvents, me, {single: true});
+    },
+
+    // Override of View's method so that we can pre-empt the View's processing if the view is being triggered by a mousedown
+    beforeViewCellFocus: function(position) {
+        // Pass call on to view if the navigation is from the keyboard, or we are not going to edit this cell.
+        if (this.view.selModel.keyNavigation || !this.isCellEditable || !this.isCellEditable(position.row, position.columnHeader)) {
+            this.view.focusCell.apply(this.view, arguments);
+        }
+    },
+
+    // private. Used if we are triggered by the rowfocus event
+    onRowFocus: function(record, row, rowIdx) {
+        this.startEdit(row, 0);
+    },
+
+    // private. Used if we are triggered by the cellfocus event
+    onCellFocus: function(record, cell, position) {
+        this.startEdit(position.row, position.column);
+    },
+
+    // private. Used if we are triggered by a cellclick event
+    onCellClick: function(view, cell, colIdx, record, row, rowIdx, e) {
+        // cancel editing if the element that was clicked was a tree expander
+        if(!view.expanderSelector || !e.getTarget(view.expanderSelector)) {
+            this.startEdit(record, view.getHeaderAtIndex(colIdx));
+        }
+    },
+
+    addHeaderEvents: function(){
+        var me = this;
+        me.mon(me.grid.headerCt, {
+            scope: me,
+            add: me.onColumnAdd,
+            remove: me.onColumnRemove
+        });
+        
+        me.keyNav = Ext.create('Ext.util.KeyNav', me.view.el, {
+            enter: me.onEnterKey,
+            esc: me.onEscKey,
+            scope: me
+        });
+    },
+    
+    // private
+    onColumnAdd: function(ct, column) {
+        if (column.isHeader) {
+            this.initFieldAccessors(column);
+        }
+    },
+
+    // private
+    onColumnRemove: function(ct, column) {
+        if (column.isHeader) {
+            this.removeFieldAccessors(column);
+        }
+    },
+
+    // private
+    onEnterKey: function(e) {
+        var me = this,
+            grid = me.grid,
+            selModel = grid.getSelectionModel(),
+            record,
+            pos,
+            columnHeader = grid.headerCt.getHeaderAtIndex(0);
+
+        // Calculate editing start position from SelectionModel
+        // CellSelectionModel
+        if (selModel.getCurrentPosition) {
+            pos = selModel.getCurrentPosition();
+            if (pos) {
+                record = grid.store.getAt(pos.row);
+                columnHeader = grid.headerCt.getHeaderAtIndex(pos.column);
+            }
+        }
+        // RowSelectionModel
+        else {
+            record = selModel.getLastSelected();
+        }
+
+        // If there was a selection to provide a starting context...
+        if (record && columnHeader) {
+            me.startEdit(record, columnHeader);
+        }
+    },
+
+    // private
+    onEscKey: function(e) {
+        this.cancelEdit();
+    },
+
+    /**
+     * @private
+     * @template
+     * Template method called before editing begins.
+     * @param {Object} context The current editing context
+     * @return {Boolean} Return false to cancel the editing process
+     */
+    beforeEdit: Ext.emptyFn,
+
+    /**
+     * Starts editing the specified record, using the specified Column definition to define which field is being edited.
+     * @param {Ext.data.Model/Number} record The Store data record which backs the row to be edited, or index of the record in Store.
+     * @param {Ext.grid.column.Column/Number} columnHeader The Column object defining the column to be edited, or index of the column.
+     */
+    startEdit: function(record, columnHeader) {
+        var me = this,
+            context = me.getEditingContext(record, columnHeader);
+
+        if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', me, context) === false || context.cancel || !me.grid.view.isVisible(true)) {
+            return false;
+        }
+
+        me.context = context;
+        me.editing = true;
+    },
+
+    // TODO: Have this use a new class Ext.grid.CellContext for use here, and in CellSelectionModel
+    /**
+     * @private
+     * Collects all information necessary for any subclasses to perform their editing functions.
+     * @param record
+     * @param columnHeader
+     * @returns {Object} The editing context based upon the passed record and column
+     */
+    getEditingContext: function(record, columnHeader) {
+        var me = this,
+            grid = me.grid,
+            view = grid.getView(),
+            node = view.getNode(record),
+            rowIdx, colIdx;
+
+        // An intervening listener may have deleted the Record
+        if (!node) {
+            return;
+        }
+
+        // Coerce the column index to the closest visible column
+        columnHeader = grid.headerCt.getVisibleHeaderClosestToIndex(Ext.isNumber(columnHeader) ? columnHeader : columnHeader.getIndex());
+
+        // No corresponding column. Possible if all columns have been moved to the other side of a lockable grid pair
+        if (!columnHeader) {
+            return;
+        }
+
+        colIdx = columnHeader.getIndex();
+
+        if (Ext.isNumber(record)) {
+            // look up record if numeric row index was passed
+            rowIdx = record;
+            record = view.getRecord(node);
+        } else {
+            rowIdx = view.indexOf(node);
+        }
+
+        return {
+            grid   : grid,
+            record : record,
+            field  : columnHeader.dataIndex,
+            value  : record.get(columnHeader.dataIndex),
+            row    : view.getNode(rowIdx),
+            column : columnHeader,
+            rowIdx : rowIdx,
+            colIdx : colIdx
+        };
+    },
+
+    /**
+     * Cancels any active edit that is in progress.
+     */
+    cancelEdit: function() {
+        var me = this;
+
+        me.editing = false;
+        me.fireEvent('canceledit', me, me.context);
+    },
+
+    /**
+     * Completes the edit if there is an active edit in progress.
+     */
+    completeEdit: function() {
+        var me = this;
+
+        if (me.editing && me.validateEdit()) {
+            me.fireEvent('edit', me, me.context);
+        }
+
+        delete me.context;
+        me.editing = false;
+    },
+
+    // @abstract
+    validateEdit: function() {
+        var me = this,
+            context = me.context;
+
+        return me.fireEvent('validateedit', me, context) !== false && !context.cancel;
+    }
+});