/**
 * @class Ext.grid.EditorGridPanel
 * @extends Ext.grid.GridPanel
 * 
This class extends the {@link Ext.grid.GridPanel GridPanel Class} to provide cell editing
 * on selected {@link Ext.grid.Column columns}. The editable columns are specified by providing
 * an {@link Ext.grid.ColumnModel#editor editor} in the {@link Ext.grid.Column column configuration}.
 * 
Editability of columns may be controlled programatically by inserting an implementation
 * of {@link Ext.grid.ColumnModel#isCellEditable isCellEditable} into the
 * {@link Ext.grid.ColumnModel ColumnModel}.
 * 
Editing is performed on the value of the field specified by the column's
 * {@link Ext.grid.ColumnModel#dataIndex dataIndex} in the backing {@link Ext.data.Store Store}
 * (so if you are using a {@link Ext.grid.ColumnModel#setRenderer renderer} in order to display
 * transformed data, this must be accounted for).
 * 
If a value-to-description mapping is used to render a column, then a {@link Ext.form.Field#ComboBox ComboBox}
 * which uses the same {@link Ext.form.Field#valueField value}-to-{@link Ext.form.Field#displayFieldField description}
 * mapping would be an appropriate editor.
 * If there is a more complex mismatch between the visible data in the grid, and the editable data in
 * the {@link Edt.data.Store Store}, then code to transform the data both before and after editing can be
 * injected using the {@link #beforeedit} and {@link #afteredit} events.
 * @constructor
 * @param {Object} config The config object
 * @xtype editorgrid
 */
Ext.grid.Editing = Ext.extend(Object, {
    
/**
     * @cfg {Number} clicksToEdit
     * 
The number of clicks on a cell required to display the cell's editor (defaults to 2).
     * 
Setting this option to 'auto' means that mousedown on the selected cell starts
     * editing that cell.
     */
    clicksToEdit: 2,

    
/**
    * @cfg {Boolean} forceValidation
    * True to force validation even if the value is unmodified (defaults to false)
    */
    forceValidation: false,

    // private - replaced by  isEditable on Grid.
    //isEditor : true,
    // private
    //detectEdit: false,

    
/**
     * @cfg {Boolean} autoEncode
     * True to automatically HTML encode and decode values pre and post edit (defaults to false)
     */
    autoEncode : false,

    // cell, row, form
    editStyle: '',

    
/**
     * @cfg {Boolean} trackMouseOver @hide
     * Not implemented.
     */
    // private

    // Not implemented atm.
    //trackMouseOver: false, // causes very odd FF errors
    activeEditor: false,

    constructor: function(cfg) {
        Ext.apply(this, cfg);
        this.editors = new Ext.util.MixedCollection(false, this.getKey);
        this.editors.addAll(cfg.editors);
    },

    // key getter for this.editors MixedCollection
    getKey: function(obj) {
        return obj.name;
    },

    // Retrieve an individual editor and create it
    // if it doesn't already exist.
    getEditor: function(name, dontCreate) {
        var ed = this.editors.get(name);
        if (!ed) {
            return false;
        }
        if (ed.events || dontCreate) {
            return ed;
        } else {
            ed = Ext.create(ed, 'textfield');
            this.editors.add(ed);
            return ed;
        }
    },

    setEditor: function(name, ed) {
        // destroy the existing editor if its already been created
        // 2nd arg indicates not to wrap the configuration so that
        // we don't create and then immediately destroy.
        var oldEd = this.getEditor(name, true);
        if (oldEd.destroy) {
            oldEd.destroy();
        }

        this.editors.add(ed);
    },

    // private
    init : function(grid){
        this.grid = grid;
        // Marks the grid as editable, so that the SelectionModel
        // can make appropriate decisions during navigation
        grid.isEditable = true;

        this.initCancelTrigger();
        this.initEditTrigger();
        grid.on('resize', this.onGridResize, this);


        this.activeEditor = null;

        grid.addEvents(
            
/**
             * @event beforeedit
             * Fires before cell editing is triggered. The edit event object has the following properties 

             * 

             * 
grid - This grid
             * 
record - The record being edited
             * 
field - The field name being edited
             * 
value - The value for the field being edited.
             * 
row - The grid row index
             * 
column - The grid column index
             * 
cancel - Set this to true to cancel the edit or return false from your handler.
             * 
             * @param {Object} e An edit event (see above for description)
             */
            "beforeedit",
            
/**
             * @event afteredit
             * Fires after a cell is edited. The edit event object has the following properties 

             * 

             * 
grid - This grid
             * 
record - The record being edited
             * 
field - The field name being edited
             * 
value - The value being set
             * 
originalValue - The original value for the field, before the edit.
             * 
row - The grid row index
             * 
column - The grid column index
             * 
             *
             * 

grid.on('afteredit', afterEdit, this );

function afterEdit(e) {
    // execute an XHR to send/commit data to the server, in callback do (if successful):
    e.record.commit();
};
             * 
             * @param {Object} e An edit event (see above for description)
             */
            "afteredit",
            
/**
             * @event validateedit
             * Fires after a cell is edited, but before the value is set in the record. Return false
             * to cancel the change. The edit event object has the following properties 

             * 

             * 
grid - This grid
             * 
record - The record being edited
             * 
field - The field name being edited
             * 
value - The value being set
             * 
originalValue - The original value for the field, before the edit.
             * 
row - The grid row index
             * 
column - The grid column index
             * 
cancel - Set this to true to cancel the edit or return false from your handler.
             * 
             * 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(e) {
  var myTargetRow = 6;

  if (e.row == myTargetRow) {
    e.cancel = true;
    e.record.data[e.field] = e.value;
  }
});
             * 
             * @param {Object} e An edit event (see above for description)
             */
            "validateedit"
        );
    },

    // private
    preEditValue : function(record, field){
        var value = record.data[field];
        return this.autoEncode && Ext.isString(value) ? Ext.util.Format.htmlDecode(value) : value;
    },

    // private
    postEditValue : function(value, originalValue, r, field){
        return this.autoEncode && Ext.isString(value) ? Ext.util.Format.htmlEncode(value) : value;
    },

    
/**
     * User overrideable to provide custom editing available logic.
     */
    isFieldEditable: function(record, field) {
        return true;
    },

    
/**
     * Starts editing the specified for the specified row/column
     * @param {Number} rowIndex
     * @param {Number} colIndex
     */
    startEditing : function(record, dataIndex, location){
        this.stopEditing();

        if (!location) {
            location = this.calculateLocation(record, dataIndex);
        }

        var grid = this.grid,
            view = grid.view,
            e = {
                grid: grid,
                record: record,
                field: dataIndex,
                value: record.data[dataIndex],
                //row: row,
                //column: col,
                cancel:false
            };


        if (this.isFieldEditable(record, dataIndex)) {
            //this.ensureVisible(record, dataIndex);

            if (grid.fireEvent("beforeedit", e) !== false && !e.cancel) {
                this.editing = true;
                this.currRecord = record;
                // this could become out of sync
                // if add/removing records!
                this.currDataIndex = dataIndex;
                this.performEdit(record, dataIndex, location, e);
            }
        }
    },

    // Sets up event handlers to cancel the editing on scrolling/columnresize
    initCancelTrigger: function() {
        var grid = this.grid;
        var cancelEdit = this.stopEditing.createDelegate(this, [true]);
        grid.on('dommousewheel', cancelEdit);
        grid.on('columnresize', cancelEdit);
    },


    // @abstract
    // Individual subclasses should provide event binding here to trigger
    // editing; the bound method should invoke startEditing(record, dataIdx, location)
    initEditTrigger: function() {

    },

    // @abstract
    // Hand control over to the user and allow them to begin the editing process
    performEdit: function(record, dataIndex, location, e) {

    },

    // @abstract
    // calculate the location if its not provided that the
    // editor should overlay on top of
    calculateLocation: function(record, dataIndex) {

    },

    // @abstract
    // stop the Editing process, passing a cancel arg of true
    // will cancel any pending changes.
    stopEditing: function(cancel) {

    },

    // @abstract
    onGridResize : function(){

    },

    // @abstract
    onEditComplete: function(ed, value, startValue) {

    }
});