-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-grid.column.Column'>/**
-</span> * @class Ext.grid.column.Column
- * @extends Ext.grid.header.Container
- *
- * This class specifies the definition for a column inside a {@link Ext.grid.Panel}. It encompasses
- * both the grid header configuration as well as displaying data within the grid itself. If the
- * {@link #columns} configuration is specified, this column will become a column group and can
- * container other columns inside. In general, this class will not be created directly, rather
- * an array of column configurations will be passed to the grid:
- *
- * {@img Ext.grid.column.Column/Ext.grid.column.Column.png Ext.grid.column.Column grid column}
- *
- * ## Code
- *
- * Ext.create('Ext.data.Store', {
- * storeId:'employeeStore',
- * fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
- * data:[
- * {firstname:"Michael", lastname:"Scott", senority:7, dep:"Manangement", hired:"01/10/2004"},
- * {firstname:"Dwight", lastname:"Schrute", senority:2, dep:"Sales", hired:"04/01/2004"},
- * {firstname:"Jim", lastname:"Halpert", senority:3, dep:"Sales", hired:"02/22/2006"},
- * {firstname:"Kevin", lastname:"Malone", senority:4, dep:"Accounting", hired:"06/10/2007"},
- * {firstname:"Angela", lastname:"Martin", senority:5, dep:"Accounting", hired:"10/21/2008"}
- * ]
- * });
- *
- * Ext.create('Ext.grid.Panel', {
- * title: 'Column Demo',
- * store: Ext.data.StoreManager.lookup('employeeStore'),
- * columns: [
- * {text: 'First Name', dataIndex:'firstname'},
- * {text: 'Last Name', dataIndex:'lastname'},
- * {text: 'Hired Month', dataIndex:'hired', xtype:'datecolumn', format:'M'},
- * {text: 'Deparment (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({senority})'}
- * ],
- * width: 400,
- * renderTo: Ext.getBody()
- * });
- *
- * ## Convenience Subclasses
- * There are several column subclasses that provide default rendering for various data types
- *
- * - {@link Ext.grid.column.Action}: Renders icons that can respond to click events inline
- * - {@link Ext.grid.column.Boolean}: Renders for boolean values
- * - {@link Ext.grid.column.Date}: Renders for date values
- * - {@link Ext.grid.column.Number}: Renders for numeric values
- * - {@link Ext.grid.column.Template}: Renders a value using an {@link Ext.XTemplate} using the record data
- *
- * ## Setting Sizes
- * The columns are laid out by a {@link Ext.layout.container.HBox} layout, so a column can either
- * be given an explicit width value or a flex configuration. If no width is specified the grid will
- * automatically the size the column to 100px. For column groups, the size is calculated by measuring
- * the width of the child columns, so a width option should not be specified in that case.
- *
- * ## Header Options
- * - {@link #text}: Sets the header text for the column
- * - {@link #sortable}: Specifies whether the column can be sorted by clicking the header or using the column menu
- * - {@link #hideable}: Specifies whether the column can be hidden using the column menu
- * - {@link #menuDisabled}: Disables the column header menu
- * - {@link #draggable}: Specifies whether the column header can be reordered by dragging
- * - {@link #groupable}: Specifies whether the grid can be grouped by the column dataIndex. See also {@link Ext.grid.feature.Grouping}
- *
- * ## Data Options
- * - {@link #dataIndex}: The dataIndex is the field in the underlying {@link Ext.data.Store} to use as the value for the column.
- * - {@link #renderer}: Allows the underlying store value to be transformed before being displayed in the grid
- *
- * @xtype gridcolumn
- */
-Ext.define('Ext.grid.column.Column', {
- extend: 'Ext.grid.header.Container',
- alias: 'widget.gridcolumn',
- requires: ['Ext.util.KeyNav'],
- alternateClassName: 'Ext.grid.Column',
-
- baseCls: Ext.baseCSSPrefix + 'column-header ' + Ext.baseCSSPrefix + 'unselectable',
-
- // Not the standard, automatically applied overCls because we must filter out overs of child headers.
- hoverCls: Ext.baseCSSPrefix + 'column-header-over',
-
- handleWidth: 5,
-
- sortState: null,
-
- possibleSortStates: ['ASC', 'DESC'],
-
- renderTpl:
- '<div class="' + Ext.baseCSSPrefix + 'column-header-inner">' +
- '<span class="' + Ext.baseCSSPrefix + 'column-header-text">' +
- '{text}' +
- '</span>' +
- '<tpl if="!values.menuDisabled"><div class="' + Ext.baseCSSPrefix + 'column-header-trigger"></div></tpl>' +
- '</div>',
-
-<span id='Ext-grid.column.Column-cfg-columns'> /**
-</span> * @cfg {Array} columns
- * <p>An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the <code>columns</code> config.</p>
- * <p>Group columns may not be sortable. But they may be hideable and moveable. And you may move headers into and out of a group. Note that
- * if all sub columns are dragged out of a group, the group is destroyed.
- */
-
-<span id='Ext-grid.column.Column-cfg-dataIndex'> /**
-</span> * @cfg {String} dataIndex <p><b>Required</b>. 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.</p>
- */
- dataIndex: null,
-
-<span id='Ext-grid.column.Column-cfg-text'> /**
-</span> * @cfg {String} text Optional. The header text to be used as innerHTML
- * (html tags are accepted) to display in the Grid. <b>Note</b>: to
- * have a clickable header with no text displayed you can use the
- * default of <tt>'&#160;'</tt>.
- */
- text: '&#160',
-
-<span id='Ext-grid.column.Column-cfg-sortable'> /**
-</span> * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column.
- * Whether local/remote sorting is used is specified in <code>{@link Ext.data.Store#remoteSort}</code>.
- */
- sortable: true,
-
-<span id='Ext-grid.column.Column-cfg-groupable'> /**
-</span> * @cfg {Boolean} groupable Optional. 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-hideable'> /**
-</span> * @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> 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 disabled 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
- * <p>A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it
- * is rendered. Example:</p>
- * <pre><code>{
- renderer: function(value){
- if (value === 1) {
- return '1 person';
- }
- return value + ' people';