---
title: "Ext.grid.column.Column"
description: "xtype 为 gridcolumn 的 Ext JS 原生组件参考。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Ext.grid.column.Column

源码定义：`ext-all-debug.js:121045`。分类：数据视图、表格与树。

## 创建示例

```javascript
var component = Ext.create("Ext.grid.column.Column", {
  xtype: "gridcolumn",
  align: 'left',
  ariaRole: 'columnheader',
  ascSortCls: Ext.baseCSSPrefix + 'column-header-sort-ASC',
  baseCls: Ext.baseCSSPrefix + 'column-header',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `align` | `String` | `'left'` | Sets the alignment of the header and rendered columns. Possible values are: `'left'`, `'center'`, and `'right'`. | `align: 'left'` |
| `ariaRole` | `String` | `'columnheader'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'columnheader'` |
| `ascSortCls` | `Mixed` | `Ext.baseCSSPrefix + 'column-header-sort-ASC'` | 配置 `ascSortCls` 对应的 CSS 类名。 | `ascSortCls: Ext.baseCSSPrefix + 'column-header-sort-ASC'` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'column-header'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'column-header'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `clickTargetName` | `String` | `'titleEl'` | 配置组件的 `clickTargetName` 选项。 | `clickTargetName: 'titleEl'` |
| `columns` | `Object[]` | `-` | An optional array of sub-column definitions. This column becomes a group, and houses the columns defined in the `columns` config. 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. | `columns: { /* 配置 */ }` |
| `componentLayout` | `String` | `'columncomponent'` | 组件采用的内部布局策略。 | `componentLayout: 'columncomponent'` |
| `dataIndex` | `String` | `null` | The name of the field in the grid's Ext.data.Store's Ext.data.Model definition from which to draw the column's value. **Required.** | `dataIndex: null` |
| `descSortCls` | `Mixed` | `Ext.baseCSSPrefix + 'column-header-sort-DESC'` | 配置 `descSortCls` 对应的 CSS 类名。 | `descSortCls: Ext.baseCSSPrefix + 'column-header-sort-DESC'` |
| `detachOnRemove` | `Boolean` | `true` | 控制是否启用 `detachOnRemove` 行为。 | `detachOnRemove: true` |
| `draggable` | `Boolean` | `true` | False to disable drag-drop reordering of this column. | `draggable: true` |
| `editor` | `Object/String` | `-` | An optional xtype or config object for a Ext.form.field.Field to use for editing. Only applicable if the grid is using an Ext.grid.plugin.Editing plugin. | `editor: "示例值"` |
| `editRenderer` | `Function` | `false` | A renderer to be used in conjunction with Ext.grid.plugin.RowEditing. This renderer is used to display a custom value for non-editable fields. | `editRenderer: false` |
| `emptyCellText` | `String` | `' '` | =undefined] The text to diplay in empty cells (cells with a value of `undefined`, `null`, or `''`). Defaults to ` ` aka ` `. | `emptyCellText: ' '` |
| `field` | `Object/String` | `-` | Alias for #editor. | `field: "示例值"` |
| `fixed` | `Boolean` | `-` | True to prevent the column from being resizable. | `fixed: true` |
| `groupable` | `Boolean` | `-` | If the grid uses a 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. | `groupable: true` |
| `groupHeaderCls` | `Mixed` | `Ext.baseCSSPrefix + 'group-header'` | 配置 `groupHeaderCls` 对应的 CSS 类名。 | `groupHeaderCls: Ext.baseCSSPrefix + 'group-header'` |
| `groupSubHeaderCls` | `Mixed` | `Ext.baseCSSPrefix + 'group-sub-header'` | 配置 `groupSubHeaderCls` 对应的 CSS 类名。 | `groupSubHeaderCls: Ext.baseCSSPrefix + 'group-sub-header'` |
| `handleWidth` | `Number` | `4` | 配置组件的 `handleWidth` 选项。 | `handleWidth: 4` |
| `header` | `String` | `-` | The header text. | `header: "示例值"` |
| `hideable` | `Boolean` | `true` | False to prevent the user from hiding this column. | `hideable: true` |
| `hoverCls` | `Mixed` | `Ext.baseCSSPrefix + 'column-header-over'` | 配置 `hoverCls` 对应的 CSS 类名。 | `hoverCls: Ext.baseCSSPrefix + 'column-header-over'` |
| `initDraggable` | `Mixed` | `Ext.emptyFn` | 配置组件的 `initDraggable` 选项。 | `initDraggable: Ext.emptyFn` |
| `initResizable` | `Mixed` | `Ext.emptyFn` | 配置组件的 `initResizable` 选项。 | `initResizable: Ext.emptyFn` |
| `isColumn` | `Boolean` | `true` | 控制是否启用 `isColumn` 行为。 | `isColumn: true` |
| `isHeader` | `Boolean` | `true` | 控制是否启用 `isHeader` 行为。 | `isHeader: true` |
| `lockable` | `Boolean` | `-` | If the grid is configured with Ext.panel.Table#enableLocking, or has columns which are configured with a #locked value, this option may be used to disable user-driven locking or unlocking of this column. This column will remain in the side into which its own #locked configuration placed it. | `lockable: true` |
| `locked` | `Boolean` | `-` | =false] True to lock this column in place. Implicitly enables locking on the grid. See also Ext.grid.Panel#enableLocking. | `locked: true` |
| `menuDisabled` | `Boolean` | `false` | True to disable the column header menu containing sort/hide options. | `menuDisabled: false` |
| `menuText` | `String` | `null` | The text to render in the column visibility selection menu for this column. If not specified, will default to the text value. | `menuText: null` |
| `noWrap` | `Boolean` | `true` | =true] The default setting indicates that external CSS rules dictate that the title is `white-space: nowrap` and therefore, width cannot affect the measured height by causing text wrapping. This is what the Sencha-supplied styles set. If you change those styles to allow text wrapping, you must set this to `false`. | `noWrap: true` |
| `renderer` | `Function/String` | `false` | A renderer is an 'interceptor' method which can be used to transform data (value, appearance, etc.) before it is rendered. Example: \{ renderer: function(value)\{ if (value === 1) \{ return '1 person'; \} return value + ' people'; \} \} Additionally a string naming an Ext.util.Format method can be passed: \{ renderer: 'uppercase' \} | `renderer: false` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `resizable` | `Boolean` | `true` | False to prevent the column from being resizable. | `resizable: true` |
| `scope` | `Object` | `-` | The scope to use when calling the #renderer function. | `scope: { /* 配置 */ }` |
| `sortable` | `Boolean` | `true` | False to disable sorting of this column. Whether local/remote sorting is used is specified in `Ext.data.Store#remoteSort`. | `sortable: true` |
| `sortState` | `Object/null` | `null` | 配置组件的 `sortState` 选项。 | `sortState: null` |
| `stateId` | `String` | `-` | An identifier which identifies this column uniquely within the owning grid's #stateful. This does not have to be *globally* unique. A column's state is not saved standalone. It is encapsulated within the owning grid's state. | `stateId: "示例值"` |
| `tdCls` | `String` | `''` | A CSS class names to apply to the table cells for this column. | `tdCls: ''` |
| `text` | `String` | `' '` | 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 ` ` aka ` `. | `text: ' '` |
| `tooltip` | `String` | `-` | A tooltip to display for this column header | `tooltip: "示例值"` |
| `tooltipType` | `String` | `'qtip'` | ="qtip"] The type of #tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute. | `tooltipType: 'qtip'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `defaultRenderer` | `value, metaData` | When defined this will take precedence over the Ext.grid.column.Column#renderer config. This is meant to be defined in subclasses that wish to supply their own renderer. | `component.defaultRenderer(...)` |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `text`、`header` 状态。源码涉及 `addCls()`、`callParent()`。 | `component.initComponent()` |
| `initItems` | `` | 初始化 `items`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`hasVisibleChildColumns()`、`hide()`。 | `component.initItems()` |
| `hasVisibleChildColumns` | `` | 检查是否存在 `visibleChildColumns`。 | `component.hasVisibleChildColumns()` |
| `onAdd` | `child` | 处理 `add` 回调。 执行时会保留父类默认行为。源码涉及 `getOwnerHeaderCt()`、`show()`、`callParent()`。 | `component.onAdd(...)` |
| `onRemove` | `child` | 处理 `remove` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`hasVisibleChildColumns()`、`hide()`。 | `component.onRemove(...)` |
| `initRenderData` | `` | 初始化 `renderData`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.initRenderData()` |
| `applyColumnState` | `state` | 应用 `columnState`。 执行时会更新 `hidden`、`locked` 状态。源码涉及 `applyColumnsState()`。 | `component.applyColumnState(...)` |
| `getColumnState` | `` | 读取并返回 `columnState`。源码涉及 `getStateId()`、`savePropsToState()`。 | `component.getColumnState()` |
| `getStateId` | `` | 读取并返回 `stateId`。 | `component.getStateId()` |
| `setText` | `text` | 设置 `text`。 执行时会更新 `text` 状态。 | `component.setText(...)` |
| `getIndex` | `` | 读取并返回 `index`。源码涉及 `getOwnerHeaderCt()`。 | `component.getIndex()` |
| `getVisibleIndex` | `` | 读取并返回 `visibleIndex`。源码涉及 `getOwnerHeaderCt()`。 | `component.getVisibleIndex()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为、更新 `menuDisabled` 状态。源码涉及 `up()`、`callParent()`、`getOwnerHeaderCt()`。 | `component.beforeRender()` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.afterRender()` |
| `afterComponentLayout` | `width, height, oldWidth, oldHeight` | 在 `componentLayout` 后执行后处理。 执行时会保留父类默认行为。源码涉及 `getOwnerHeaderCt()`、`callParent()`。 | `component.afterComponentLayout(...)` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为、更新 `keyNav` 状态。源码涉及 `callParent()`。 | `component.onDestroy()` |
| `onTitleMouseOver` | `` | 处理 `titleMouseOver` 回调。 | `component.onTitleMouseOver()` |
| `onTitleMouseOut` | `` | 处理 `titleMouseOut` 回调。 | `component.onTitleMouseOut()` |
| `onDownKey` | `e` | 处理 `downKey` 回调。源码涉及 `onTitleElClick()`。 | `component.onDownKey(...)` |
| `onEnterKey` | `e` | 处理 `enterKey` 回调。源码涉及 `onTitleElClick()`。 | `component.onEnterKey(...)` |
| `onTitleElDblClick` | `e, t` | 处理 `titleElDblClick` 回调。源码涉及 `isOnLeftEdge()`、`previousNode()`、`getOwnerHeaderCt()`、`isOnRightEdge()`。 | `component.onTitleElDblClick(...)` |
| `autoSize` | `` | 自动计算尺寸当前组件。源码涉及 `query()`、`getOwnerHeaderCt()`。 | `component.autoSize()` |
| `onTitleElClick` | `e, t` | 处理 `titleElClick` 回调。源码涉及 `isOnLeftEdge()`、`isOnRightEdge()`、`toggleSortState()`。 | `component.onTitleElClick(...)` |
| `processEvent` | `type, view, cell, recordIndex, cellIndex, e` | 处理 `event`。 | `component.processEvent(...)` |
| `toggleSortState` | `` | 切换 `sortState`。源码涉及 `sort()`。 | `component.toggleSortState()` |
| `sort` | `direction` | 排序当前组件。 执行时会更新 `sorting` 状态。源码涉及 `up()`、`getSortParam()`。 | `component.sort(...)` |
| `getSortParam` | `` | 读取并返回 `sortParam`。 | `component.getSortParam()` |
| `setSortState` | `sorter` | 设置 `sortState`。源码涉及 `getOwnerHeaderCt()`、`addCls()`、`removeCls()`。 | `component.setSortState(...)` |
| `isHideable` | `` | 判断 `hideable` 状态。 | `component.isHideable()` |
| `hasOtherMenuEnabledChildren` | `result` | 检查是否存在 `otherMenuEnabledChildren`。源码涉及 `isXType()`、`query()`。 | `component.hasOtherMenuEnabledChildren(...)` |
| `isLockable` | `` | 判断 `lockable` 状态。 | `component.isLockable()` |
| `isLocked` | `` | 判断 `locked` 状态。源码涉及 `up()`。 | `component.isLocked()` |
| `hasMultipleVisibleChildren` | `result` | 检查是否存在 `multipleVisibleChildren`。源码涉及 `isXType()`、`query()`。 | `component.hasMultipleVisibleChildren(...)` |
| `hide` | `fromOwner` | 隐藏组件。 执行时会保留父类默认行为、更新 `visibleSiblingCount`、`savedWidth` 状态。源码涉及 `getOwnerHeaderCt()`、`callParent()`、`isVisible()`、`getWidth()`。 | `component.hide(...)` |
| `show` | `fromOwner, fromChild` | 显示组件。 执行时会保留父类默认行为。源码涉及 `getOwnerHeaderCt()`、`isVisible()`、`callParent()`、`query()`。 | `component.show(...)` |
| `getCellWidth` | `` | 读取并返回 `cellWidth`。源码涉及 `getTableWidth()`。 | `component.getCellWidth()` |
| `getCellId` | `` | 读取并返回 `cellId`。源码涉及 `getItemId()`。 | `component.getCellId()` |
| `getCellSelector` | `` | 读取并返回 `cellSelector`。源码涉及 `getCellId()`。 | `component.getCellSelector()` |
| `getCellInnerSelector` | `` | 读取并返回 `cellInnerSelector`。源码涉及 `getCellSelector()`。 | `component.getCellInnerSelector()` |
| `isOnLeftEdge` | `e` | 判断 `onLeftEdge` 状态。源码涉及 `getX()`。 | `component.isOnLeftEdge(...)` |
| `isOnRightEdge` | `e` | 判断 `onRightEdge` 状态。源码涉及 `getX()`、`getWidth()`。 | `component.isOnRightEdge(...)` |
| `setMenuActive` | `isMenuOpen` | 设置 `menuActive`。 | `component.setMenuActive(...)` |

## 事件

源码中未找到该组件自身注册的事件；可监听继承事件。

Source: https://ag.879818327.xyz/ext/data/grid-column-column/index.mdx