+<span id='Ext-grid-column-Column-cfg-dataIndex'> /**
+</span> * @cfg {String} dataIndex
+ * The name of the field in the grid's {@link Ext.data.Store}'s {@link Ext.data.Model} definition from
+ * which to draw the column's value. **Required.**
+ */
+ dataIndex: null,
+
+<span id='Ext-grid-column-Column-cfg-text'> /**
+</span> * @cfg {String} text
+ * The header text to be used as innerHTML (html tags are accepted) to display in the Grid.
+ * **Note**: to have a clickable header with no text displayed you can use the default of `&#160;` aka `&nbsp;`.
+ */
+ text: '&#160;',
+
+<span id='Ext-grid-column-Column-cfg-sortable'> /**
+</span> * @cfg {Boolean} sortable
+ * False to disable sorting of this column. Whether local/remote sorting is used is specified in
+ * `{@link Ext.data.Store#remoteSort}`. Defaults to true.
+ */
+ sortable: true,
+
+<span id='Ext-grid-column-Column-cfg-groupable'> /**
+</span> * @cfg {Boolean} groupable
+ * If the grid uses a {@link Ext.grid.feature.Grouping}, this option may be used to disable the header menu
+ * item to group by the column selected. By default, the header menu group option is enabled. Set to false to
+ * disable (but still show) the group option in the header menu for the column.
+ */
+
+<span id='Ext-grid-column-Column-cfg-fixed'> /**
+</span> * @cfg {Boolean} fixed
+ * @deprecated.
+ * True to prevent the column from being resizable.
+ */
+
+<span id='Ext-grid-column-Column-cfg-resizable'> /**
+</span> * @cfg {Boolean} resizable
+ * Set to <code>false</code> to prevent the column from being resizable. Defaults to <code>true</code>
+ */
+
+<span id='Ext-grid-column-Column-cfg-hideable'> /**
+</span> * @cfg {Boolean} hideable
+ * False to prevent the user from hiding this column. Defaults to true.
+ */
+ hideable: true,
+
+<span id='Ext-grid-column-Column-cfg-menuDisabled'> /**
+</span> * @cfg {Boolean} menuDisabled
+ * True to disable the column header menu containing sort/hide options. Defaults to false.
+ */
+ menuDisabled: false,
+
+<span id='Ext-grid-column-Column-cfg-renderer'> /**
+</span> * @cfg {Function} renderer
+ * A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.)
+ * before it is rendered. Example:
+ *
+ * {
+ * renderer: function(value){
+ * if (value === 1) {
+ * return '1 person';
+ * }
+ * return value + ' people';
+ * }
+ * }
+ *
+ * @cfg {Object} renderer.value The data value for the current cell
+ * @cfg {Object} renderer.metaData A collection of metadata about the current cell; can be used or modified
+ * by the renderer. Recognized properties are: tdCls, tdAttr, and style.
+ * @cfg {Ext.data.Model} renderer.record The record for the current row
+ * @cfg {Number} renderer.rowIndex The index of the current row
+ * @cfg {Number} renderer.colIndex The index of the current column
+ * @cfg {Ext.data.Store} renderer.store The data store
+ * @cfg {Ext.view.View} renderer.view The current view
+ * @cfg {String} renderer.return The HTML string to be rendered.
+ */
+ renderer: false,
+
+<span id='Ext-grid-column-Column-cfg-align'> /**
+</span> * @cfg {String} align
+ * Sets the alignment of the header and rendered columns. Defaults to 'left'.
+ */
+ align: 'left',
+
+<span id='Ext-grid-column-Column-cfg-draggable'> /**
+</span> * @cfg {Boolean} draggable
+ * False to disable drag-drop reordering of this column. Defaults to true.
+ */
+ draggable: true,
+
+ // Header does not use the typical ComponentDraggable class and therefore we
+ // override this with an emptyFn. It is controlled at the HeaderDragZone.
+ initDraggable: Ext.emptyFn,
+
+<span id='Ext-grid-column-Column-cfg-tdCls'> /**
+</span> * @cfg {String} tdCls
+ * A CSS class names to apply to the table cells for this column.
+ */
+
+<span id='Ext-grid-column-Column-cfg-editor'> /**
+</span> * @cfg {Object/String} editor
+ * An optional xtype or config object for a {@link Ext.form.field.Field Field} to use for editing.
+ * Only applicable if the grid is using an {@link Ext.grid.plugin.Editing Editing} plugin.
+ */
+
+<span id='Ext-grid-column-Column-cfg-field'> /**
+</span> * @cfg {Object/String} field
+ * Alias for {@link #editor}.
+ * @deprecated 4.0.5 Use {@link #editor} instead.
+ */
+
+<span id='Ext-grid-column-Column-property-triggerEl'> /**
+</span> * @property {Ext.Element} triggerEl
+ * Element that acts as button for column header dropdown menu.
+ */
+
+<span id='Ext-grid-column-Column-property-textEl'> /**
+</span> * @property {Ext.Element} textEl
+ * Element that contains the text in column header.
+ */
+
+<span id='Ext-grid-column-Column-property-isHeader'> /**
+</span> * @private
+ * Set in this class to identify, at runtime, instances which are not instances of the
+ * HeaderContainer base class, but are in fact, the subclass: Header.
+ */
+ isHeader: true,
+
+ initComponent: function() {
+ var me = this,
+ i,
+ len,
+ item;
+
+ if (Ext.isDefined(me.header)) {
+ me.text = me.header;
+ delete me.header;
+ }
+
+ // Flexed Headers need to have a minWidth defined so that they can never be squeezed out of existence by the
+ // HeaderContainer's specialized Box layout, the ColumnLayout. The ColumnLayout's overridden calculateChildboxes
+ // method extends the available layout space to accommodate the "desiredWidth" of all the columns.
+ if (me.flex) {
+ me.minWidth = me.minWidth || Ext.grid.plugin.HeaderResizer.prototype.minColWidth;
+ }
+ // Non-flexed Headers may never be squeezed in the event of a shortfall so
+ // always set their minWidth to their current width.
+ else {
+ me.minWidth = me.width;
+ }
+
+ if (!me.triStateSort) {
+ me.possibleSortStates.length = 2;
+ }
+
+ // A group header; It contains items which are themselves Headers
+ if (Ext.isDefined(me.columns)) {
+ me.isGroupHeader = true;
+
+ //<debug>
+ if (me.dataIndex) {
+ Ext.Error.raise('Ext.grid.column.Column: Group header may not accept a dataIndex');
+ }
+ if ((me.width && me.width !== Ext.grid.header.Container.prototype.defaultWidth) || me.flex) {
+ Ext.Error.raise('Ext.grid.column.Column: Group header does not support setting explicit widths or flexs. The group header width is calculated by the sum of its children.');
+ }
+ //</debug>
+
+ // The headers become child items
+ me.items = me.columns;
+ delete me.columns;
+ delete me.flex;
+ me.width = 0;
+
+ // Acquire initial width from sub headers
+ for (i = 0, len = me.items.length; i < len; i++) {
+ item = me.items[i];
+ if (!item.hidden) {
+ me.width += item.width || Ext.grid.header.Container.prototype.defaultWidth;
+ }
+ //<debug>
+ if (item.flex) {
+ Ext.Error.raise('Ext.grid.column.Column: items of a grouped header do not support flexed values. Each item must explicitly define its width.');
+ }
+ //</debug>
+ }
+ me.minWidth = me.width;
+
+ me.cls = (me.cls||'') + ' ' + Ext.baseCSSPrefix + 'group-header';
+ me.sortable = false;
+ me.resizable = false;
+ me.align = 'center';
+ }
+
+ me.addChildEls('titleContainer', 'triggerEl', 'textEl');
+
+ // Initialize as a HeaderContainer
+ me.callParent(arguments);
+ },
+
+ onAdd: function(childHeader) {
+ childHeader.isSubHeader = true;
+ childHeader.addCls(Ext.baseCSSPrefix + 'group-sub-header');
+ this.callParent(arguments);
+ },
+
+ onRemove: function(childHeader) {
+ childHeader.isSubHeader = false;
+ childHeader.removeCls(Ext.baseCSSPrefix + 'group-sub-header');
+ this.callParent(arguments);
+ },
+
+ initRenderData: function() {
+ var me = this;
+
+ Ext.applyIf(me.renderData, {
+ text: me.text,
+ menuDisabled: me.menuDisabled
+ });
+ return me.callParent(arguments);
+ },
+
+ applyColumnState: function (state) {
+ var me = this,
+ defined = Ext.isDefined;
+
+ // apply any columns
+ me.applyColumnsState(state.columns);
+
+ // Only state properties which were saved should be restored.
+ // (Only user-changed properties were saved by getState)
+ if (defined(state.hidden)) {
+ me.hidden = state.hidden;
+ }
+ if (defined(state.locked)) {
+ me.locked = state.locked;
+ }
+ if (defined(state.sortable)) {
+ me.sortable = state.sortable;
+ }
+ if (defined(state.width)) {
+ delete me.flex;
+ me.width = state.width;
+ } else if (defined(state.flex)) {
+ delete me.width;
+ me.flex = state.flex;
+ }
+ },
+
+ getColumnState: function () {
+ var me = this,
+ columns = [],
+ state = {
+ id: me.headerId
+ };
+
+ me.savePropsToState(['hidden', 'sortable', 'locked', 'flex', 'width'], state);
+
+ if (me.isGroupHeader) {
+ me.items.each(function(column){
+ columns.push(column.getColumnState());