---
title: "Wb.field.ColorField"
description: "xtype 为 colorfield 的 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.

# Wb.field.ColorField

源码定义：`ext-all-debug.js:146117`。分类：表单与字段。

## 创建示例

```javascript
var component = Ext.create("Wb.field.ColorField", {
  xtype: "colorfield",
  matchFieldWidth: false,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `matchFieldWidth` | `Boolean` | `false` | 控制是否启用 `matchFieldWidth` 行为。 | `matchFieldWidth: false` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `createPicker` | `` | 创建 `picker`。 执行时会更新 `picker` 状态。源码涉及 `collapse()`。 | `component.createPicker()` |
| `onSelect` | `m, d` | 处理 `select` 回调。 执行时会派发 `select` 事件、更新组件值。源码涉及 `setValue()`、`collapse()`、`fireEvent()`。 | `component.onSelect(...)` |
| `onExpand` | `` | 处理 `expand` 回调。源码涉及 `getValue()`。 | `component.onExpand()` |
| `onCollapse` | `` | 处理 `collapse` 回调。源码涉及 `focus()`。 | `component.onCollapse()` |
| `beforeBlur` | `` | 在 `blur` 前执行预处理。 执行时会更新组件值。源码涉及 `getValue()`、`setValue()`。 | `component.beforeBlur()` |

## 事件

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

Source: https://ag.879818327.xyz/ext/form/wb-field-colorfield/index.mdx