/**
 * @class Ext.ColumnModel
 * @extends Ext.container.Container
 * 
After the data has been read into the client side cache ({@link Ext.data.Store Store}),
 * the ColumnModel is used to configure how and what parts of that data will be displayed in the
 * vertical slices (columns) of the grid. The Ext.ColumnModel Class is the default implementation
 * of a ColumnModel used by implentations of {@link Ext.grid.GridPanel GridPanel}.

 * 
Data is mapped into the store's records and then indexed into the ColumnModel using the
 * {@link Ext.grid.Column#dataIndex dataIndex}:

 * 

{data source} == mapping ==> {data store} == {@link Ext.grid.Column#dataIndex dataIndex} ==> {ColumnModel}
 * 

 * 
Each {@link Ext.grid.Column Column} in the grid's ColumnModel is configured with a
 * {@link Ext.grid.Column#dataIndex dataIndex} to specify how the data within
 * each record in the store is indexed into the ColumnModel.

 * 
There are two ways to initialize the ColumnModel class:

 * 
Initialization Method 1: an Array



 var colModel = new Ext.ColumnModel([
    { header: "Ticker", width: 60, sortable: true},
    { header: "Company Name", width: 150, sortable: true, id: 'company'},
    { header: "Market Cap.", width: 100, sortable: true},
    { header: "$ Sales", width: 100, sortable: true, renderer: money},
    { header: "Employees", width: 100, sortable: true, resizable: false}
 ]);
 

 * 
The ColumnModel may be initialized with an Array of {@link Ext.grid.Column} column configuration
 * objects to define the initial layout / display of the columns in the Grid. The order of each
 * {@link Ext.grid.Column} column configuration object within the specified Array defines the initial
 * order of the column display.  A Column's display may be initially hidden using the
 * {@link Ext.grid.Column#hidden hidden} config property (and then shown using the column
 * header menu).  Fields that are not included in the ColumnModel will not be displayable at all.

 * 
How each column in the grid correlates (maps) to the {@link Ext.data.Record} field in the
 * {@link Ext.data.Store Store} the column draws its data from is configured through the
 * {@link Ext.grid.Column#dataIndex dataIndex}.  If the
 * {@link Ext.grid.Column#dataIndex dataIndex} is not explicitly defined (as shown in the
 * example above) it will use the column configuration's index in the Array as the index.

 * 
See {@link Ext.grid.Column} for additional configuration options for each column.

 * 
Initialization Method 2: an Object

 * 
In order to use configuration options from Ext.ColumnModel, an Object may be used to
 * initialize the ColumnModel.  The column configuration Array will be specified in the {@link #columns}
 * config property. The {@link #defaults} config property can be used to apply defaults
 * for all columns, e.g.:

 var colModel = new Ext.ColumnModel({
    columns: [
        { header: "Ticker", width: 60, menuDisabled: false},
        { header: "Company Name", width: 150, id: 'company'},
        { header: "Market Cap."},
        { header: "$ Sales", renderer: money},
        { header: "Employees", resizable: false}
    ],
    defaults: {
        sortable: true,
        menuDisabled: true,
        width: 100
    },
    listeners: {
        {@link #hiddenchange}: function(cm, colIndex, hidden) {
            saveConfig(colIndex, hidden);
        }
    }
});
 

 * 
In both examples above, the ability to apply a CSS class to all cells in a column (including the
 * header) is demonstrated through the use of the {@link Ext.grid.Column#id id} config
 * option. This column could be styled by including the following css:

 //add this css *after* the core css is loaded
.x-grid3-td-company {
    color: red; // entire column will have red font
}
// modify the header row only, adding an icon to the column header
.x-grid3-hd-company {
    background: transparent
        url(../../resources/images/icons/silk/building.png)
        no-repeat 3px 3px ! important;
        padding-left:20px;
}
 

 * Note that the "Company Name" column could be specified as the
 * {@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}.
 * @constructor
 * @param {Mixed} config Specify either an Array of {@link Ext.grid.Column} configuration objects or specify
 * a configuration Object (see introductory section discussion utilizing Initialization Method 2 above).
 */
Ext.ColumnModel = Ext.extend(Ext.container.Container, {
    cls: Ext.baseCSSPrefix + 'column-header-ct',
    dock: 'bottom',
    height: 24,
    defaultType: 'column',

    
/**
     * @cfg {Array} columns An Array of object literals.  The config options defined by
     * {@link Ext.grid.Column} are the options which may appear in the object literal for each
     * individual column definition.
     */

    
/**
     * @cfg {Object} defaults Object literal which will be used to apply {@link Ext.grid.Column}
     * configuration options to all {@link #columns}.  Configuration options specified with
     * individual {@link Ext.grid.Column column} configs will supersede these {@link #defaults}.
     */

    constructor : function(config) {
        
/**
         * An Array of {@link Ext.grid.Column Column definition} objects representing the configuration
         * of this ColumnModel.  See {@link Ext.grid.Column} for the configuration properties that may
         * be specified.
         * @property config
         * @type Array
         */
        //this.setConfig(config.items, true);

        this.addEvents(
            
/**
             * @event widthchange
             * Fires when the width of a column is programmaticially changed using
             * {@link #setColumnWidth}.
             * Note internal resizing suppresses the event from firing. See also
             * {@link Ext.grid.GridPanel}.{@link #columnresize}.
             * @param {ColumnModel} this
             * @param {Number} columnIndex The column index
             * @param {Number} newWidth The new width
             */
            "widthchange",

            
/**
             * @event headerchange
             * Fires when the text of a header changes.
             * @param {ColumnModel} this
             * @param {Number} columnIndex The column index
             * @param {String} newText The new header text
             */
            "headerchange",

            
/**
             * @event hiddenchange
             * Fires when a column is hidden or "unhidden".
             * @param {ColumnModel} this
             * @param {Number} columnIndex The column index
             * @param {Boolean} hidden true if hidden, false otherwise
             */
            "hiddenchange",

            
/**
             * @event columnmoved
             * Fires when a column is moved.
             * @param {ColumnModel} this
             * @param {Number} oldIndex
             * @param {Number} newIndex
             */
            "columnmoved",

            
/**
             * @event configchange
             * Fires when the configuration is changed
             * @param {ColumnModel} this
             */
            "configchange"
        );

        Ext.ColumnModel.superclass.constructor.call(this, config);
    },


    initComponent: function() {
        this.layout = {
            type: 'gridcolumn',
            align: 'stretch'
        };
        Ext.ColumnModel.superclass.initComponent.call(this);
    },

    
/**
     * Returns the id of the column at the specified index.
     * @param {Number} index The column index
     * @return {String} the id
     */
    getColumnId: function(index) {
        var items = this.items,
            column = items.getAt(index);
        return items.getKey(column);
    },

    
/**
     * Returns the column at the specified index.
     * @param {Number} index The column index
     * @return {Ext.Column} column
     */
    getColumnAt: function(index) {
        return this.items.getAt(index);
    },

    
/**
     * Returns the column for a specified id.
     * @param {String} id The column id
     * @return {Object} the column
     */
    getColumnById: function(id) {
        return this.items.get(id);
    },

    
/**
     * Returns the index for a specified column id.
     * @param {String} id The column id
     * @return {Number} the index, or -1 if not found
     */
    getIndexById: function(id) {
        return this.items.indexOfKey(id);
    },

    
/**
     * Moves a column from one position to another.
     * @param {Number} oldIndex The index of the column to move.
     * @param {Number} newIndex The position at which to reinsert the column.
     */
    moveColumn : function(oldIndex, newIndex) {
        var column = this.getColumnAt(oldIndex);
        this.remove(column, false);
        this.insert(newIndex, column);
        this.doLayout();
        this.fireEvent("columnmoved", this, oldIndex, newIndex);
    },

    
/**
     * Returns the number of columns.
     * @param {Boolean} visibleOnly Optional. Pass as true to only include visible columns.
     * @return {Number}
     */
    getColumnCount : function(visibleOnly) {
        var items = this.items;
        if (visibleOnly) {
            return items.filterBy(function(item) {
                return item.isVisible();
            }).getCount();
        } else {
            return items.getCount();
        }
    },

    
/**
     * Returns the column configs that return true by the passed function that is called
     * with (columnConfig, index)


// returns an array of column config objects for all hidden columns
var columns = grid.getColumnModel().getColumnsBy(function(c){
  return c.hidden;
});


     * @param {Function} fn A function which, when passed a {@link Ext.grid.Column Column} object, must
     * return true if the column is to be included in the returned Array.
     * @param {Object} scope (optional) The scope (this reference) in which the function
     * is executed. Defaults to this ColumnModel.
     * @return {Ext.util.MixedCollection} result
     */
    getColumnsBy : function(fn, scope) {
        return this.items.filterBy(fn, scope);
    },

    
/**
     * Returns true if the specified column is sortable.
     * @param {Number} col The column index
     * @return {Boolean}
     */
    isSortable: function(colIdx) {
        return !!this.items.getAt(colIdx).sortable;
    },

    
/**
     * Returns true if the specified column menu is disabled.
     * @param {Number} col The column index
     * @return {Boolean}
     */
    isMenuDisabled: function(colIdx) {
        return !!this.items.getAt(colIdx).menuDisabled;
    },

    
/**
     * Returns the rendering (formatting) function defined for the column.
     * @param {Number} col The column index.
     * @return {Function} The function used to render the cell. See {@link #setRenderer}.
     */
    getRenderer: function(colIdx) {
        return this.items.getAt(colIdx).getRenderer();
    },

    getRendererScope : function(colIdx) {
        return this.items.getAt(colIdx).scope;
    },

    
/**
     * Sets the rendering (formatting) function for a column.  See {@link Ext.util.Format} for some
     * default formatting functions.
     * @param {Number} col The column index
     * @param {Function} fn The function to use to process the cell's raw data
     * to return HTML markup for the grid view. The render function is called with
     * the following parameters:
     */
    setRenderer : function(colIdx, fn) {
        this.items.getAt(colIdx).renderer = fn;
    },

    
/**
     * Returns the width for the specified column.
     * @param {Number} col The column index
     * @return {Number}
     */
    getColumnWidth: function(colIdx) {
        var col = this.items.getAt(colIdx),
            width;

        if (col.rendered) {
            width = col.getWidth();
        } else {
            width = col.width;
        }

        return width;
    },

    getColumnStyle: function(colIdx) {
        var col = this.items.itemAt(colIdx);
        return col.getColumnStyle();
    },

    
/**
     * Sets the width for a column.
     * @param {Number} col The column index
     * @param {Number} width The new width
     * @param {Boolean} suppressEvent True to suppress firing the {@link #widthchange}
     * event. Defaults to false.
     */
    setColumnWidth : function(colIdx, width, suppressEvent) {
        var column = this.items.getAt(colIdx);
        delete column.width;
        column.setWidth(width);
        this.doLayout();
        this.totalWidth = null;

        if (!suppressEvent) {
            this.fireEvent("widthchange", this, colIdx, width);
        }
    },

    
/**
     * Returns the total width of all columns.
     * @param {Boolean} includeHidden True to include hidden column widths
     * @return {Number}
     */
    getTotalWidth : function(includeHidden) {
        if (!this.totalWidth) {
            this.totalWidth = 0;
            var items = this.items;
            items.each(function(col, idx) {
                if (includeHidden || !this.isHidden(idx)) {
                    this.totalWidth += this.getColumnWidth(idx);
                }
            }, this);
        }
        return this.totalWidth;
    },

    
/**
     * Returns the header for the specified column.
     * @param {Number} col The column index
     * @return {String}
     */
    getColumnHeader : function(colIdx) {
        return this.items.getAt(colIdx).header;
    },

    
/**
     * Sets the header for a column.
     * @param {Number} col The column index
     * @param {String} header The new header
     */
    setColumnHeader : function(colIdx, header) {
        this.items.getAt(colIdx).setHeader(header);
        this.fireEvent("headerchange", this, colIdx, header);
    },

    
/**
     * Returns the tooltip for the specified column.
     * @param {Number} col The column index
     * @return {String}
     */
    getColumnTooltip : function(colIdx) {
        return this.items.getAt(colIdx).tooltip;
    },

    
/**
     * Sets the tooltip for a column.
     * @param {Number} col The column index
     * @param {String} tooltip The new tooltip
     */
    setColumnTooltip : function(colIdx, tooltip) {
        this.items.getAt(colIdx).tooltip = tooltip;
    },

    
/**
     * Returns the dataIndex for the specified column.


// Get field name for the column
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);


     * @param {Number} col The column index
     * @return {String} The column's dataIndex
     */
    getDataIndex : function(colIdx) {
        return this.items.getAt(colIdx).dataIndex;
    },

    
/**
     * Sets the dataIndex for a column.
     * @param {Number} col The column index
     * @param {String} dataIndex The new dataIndex
     */
    setDataIndex : function(colIdx, dataIndex) {
        this.items.getAt(colIdx).dataIndex = dataIndex;
    },

    
/**
     * Finds the index of the first matching column for the given dataIndex.
     * @param {String} col The dataIndex to find
     * @return {Number} The column index, or null if no match was found
     */
    findColumnIndex : function(dataIndex) {
        var col = this.items.find(function(column) {
            return column.dataIndex === dataIndex;
        });
        return this.items.indexOf(col);
    },

    
/**
     * Returns true if the cell is editable.


var store = new Ext.data.Store({...});
var colModel = new Ext.ColumnModel({
  columns: [...],
  isCellEditable: function(col, row) {
    var record = store.getAt(row);
    if (record.get('readonly')) { // replace with your condition
      return false;
    }
    return Ext.ColumnModel.prototype.isCellEditable.call(this, col, row);
  }
});
var grid = new Ext.grid.GridPanel({
  store: store,
  colModel: colModel,
  ...
});


     * @param {Number} colIndex The column index
     * @param {Number} rowIndex The row index
     * @return {Boolean}
     * @REWRITE
     */
    //isCellEditable : function(colIdx, rowIdx) {
    //    var column = this.items.getAt(colIdx),
    //        ed = column.editable;
    //
    //    //force boolean
    //    return !!(ed || (!Ext.isDefined(ed) && column.editor));
    //},

    
/**
     * Returns the editor defined for the cell/column.
     * @param {Number} colIndex The column index
     * @param {Number} rowIndex The row index
     * @return {Ext.Editor} The {@link Ext.Editor Editor} that was created to wrap
     * the {@link Ext.form.Field Field} used to edit the cell.
     * @REWRITE
     */
    //getCellEditor : function(colIndex, rowIndex) {
    //    return this.items.getAt(colIndex).editor;
    //},

    
/**
     * Sets if a column is editable.
     * @param {Number} col The column index
     * @param {Boolean} editable True if the column is editable
     */
    //setEditable : function(colIdx, editable) {
    //    this.items.getAt(colIdx).editable = editable;
    //},

    
/**
     * Returns true if the column is {@link Ext.grid.Column#hidden hidden},
     * false otherwise.
     * @param {Number} colIndex The column index
     * @return {Boolean}
     */
    isHidden : function(colIdx) {
        return !this.items.getAt(colIdx).isVisible();
        //return !!this.items.getAt(colIdx).hidden; // ensure returns boolean
    },

    
/**
     * Returns true if the column is {@link Ext.grid.Column#fixed fixed},
     * false otherwise.
     * @param {Number} colIndex The column index
     * @return {Boolean}
     */
    isFixed : function(colIdx) {
        return !!this.items.getAt(colIdx).fixed;
    },

    
/**
     * Returns true if the column can be resized
     * @return {Boolean}
     */
    isResizable : function(colIdx) {
        var col = this.items.getAt(colIdx);
        return colIdx >= 0 && col.resizable !== false && col.fixed !== true;
    },

    
/**
     * Sets if a column is hidden.


myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first column).


     * @param {Number} colIndex The column index
     * @param {Boolean} hidden True if the column is hidden
     */
    setHidden : function(colIdx, hidden) {
        var column = this.items.getAt(colIdx);
        // should use cmp isVisible instead
        if(column.hidden !== hidden){
            column[hidden ? 'hide' : 'show']();
            this.doLayout();
            //remove in favor of cmp hidden.
            column.hidden = hidden;
            this.totalWidth = null;
            this.fireEvent("hiddenchange", this, colIdx, hidden);
        }
    },

    
/**
     * Sets the editor for a column and destroys the prior editor.
     * @param {Number} col The column index
     * @param {Object} editor The editor object
     * @REWRITE
     */
    //setEditor : function(colIdx, editor) {
    //    this.items.getAt(colIdx).setEditor(editor);
    //},

    
/**
     * Destroys this column model by purging any event listeners. Destroys and dereferences all Columns.
     * @REWRITE
     */
    destroy : function() {
        this.clearListeners();
    },

    /**
     * @private
     * Setup any saved state for the column, ensures that defaults are applied.
     * @REWRITE
     */
    setState : function(col, state) {
        Ext.applyIf(this.config[col], state);
    },

    scrollTo: function(scrollLeft) {
        var el = this.el;
        el.dom.scrollLeft = scrollLeft;
        el.dom.scrollLeft = scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
    },

    onDenyColumnHide: function() {

    }
});
Ext.reg('columnmodel', Ext.ColumnModel);


Ext.grid.ColumnLayout = Ext.extend(Ext.layout.HBoxLayout, {
    // FIX: when flexing we actually don't have enough space as we would
    // typically because of the scrollOffset on the GridView, must reserve this
    updateInnerCtSize: function(tSize, calcs) {
        if (calcs.meta.tooNarrow) {
            var width   = calcs.meta.desiredWidth,
                height  = tSize.height,
                offset  = 0;

            // if ColumnModel has been placed in a container.
            if (this.owner.ownerCt) {
                offset = this.owner.ownerCt.view.getScrollOffset();
            }

            this.innerCt.setSize(width + offset, height);
        } else {
            return Ext.grid.ColumnLayout.superclass.updateInnerCtSize.apply(this, arguments);
        }
    }
});
Ext.regLayout('gridcolumn', Ext.grid.ColumnLayout);