---
title: "Ext.picker.Color"
description: "xtype 为 colorpicker 的 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.picker.Color

源码定义：`ext-all-debug.js:108156`。分类：选择器与滑块。

## 创建示例

```javascript
var component = Ext.create("Ext.picker.Color", {
  xtype: "colorpicker",
  allowReselect: false,
  clickEvent: 'click',
  colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,
  colors: [,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `allowReselect` | `Boolean` | `false` | 控制是否启用 `allowReselect` 行为。 | `allowReselect: false` |
| `clickEvent` | `String` | `'click'` | 配置组件的 `clickEvent` 选项。 | `clickEvent: 'click'` |
| `colorRe` | `Mixed` | `/(?:^\|\s)color-(.{6})(?:\s\|$)/` | 配置组件的 `colorRe` 选项。 | `colorRe: /(?:^\|\s)color-(.{6})(?:\s\|$)/` |
| `colors` | `Array` | `[` | 配置组件的 `colors` 选项。 | `colors: [` |
| `componentCls` | `Mixed` | `Ext.baseCSSPrefix + 'color-picker'` | 配置 `componentCls` 对应的 CSS 类名。 | `componentCls: Ext.baseCSSPrefix + 'color-picker'` |
| `itemCls` | `Mixed` | `Ext.baseCSSPrefix + 'color-picker-item'` | 配置 `itemCls` 对应的 CSS 类名。 | `itemCls: Ext.baseCSSPrefix + 'color-picker-item'` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `selectedCls` | `Mixed` | `Ext.baseCSSPrefix + 'color-picker-selected'` | 配置 `selectedCls` 对应的 CSS 类名。 | `selectedCls: Ext.baseCSSPrefix + 'color-picker-selected'` |
| `value` | `Object/null` | `null` | 组件的当前值。 | `value: null` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为。源码涉及 `callParent()`、`addEvents()`、`on()`。 | `component.initComponent()` |
| `initRenderData` | `` | 初始化 `renderData`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.initRenderData()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`、`mon()`。 | `component.onRender()` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为、更新 `value` 状态。源码涉及 `callParent()`、`select()`。 | `component.afterRender()` |
| `handleClick` | `event, target` | 处理 `click`。源码涉及 `select()`。 | `component.handleClick(...)` |
| `select` | `color, suppressEvent` | 选中当前目标。 执行时会派发 `select` 事件、更新 `value` 状态。源码涉及 `fireEvent()`。 | `component.select(...)` |
| `clear` | `` | 清空当前值或选择。 执行时会更新 `value` 状态。 | `component.clear()` |
| `getValue` | `` | 读取并返回 `value`。 | `component.getValue()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `select` | 用户选中值或记录时触发。 源码在 `select()` 中通过 `fireEvent()` 触发。 | `listeners: { select: function () {} }` |

Source: https://ag.879818327.xyz/ext/picker/picker-color/index.mdx