Ext.picker.Color | WebBuilder 文档

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

创建示例

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 () {} }`