---
title: "Ext.draw.Component"
description: "xtype 为 draw 的 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.draw.Component

源码定义：`ext-all-debug.js:61541`。分类：图表与绘图。

## 创建示例

```javascript
var component = Ext.create("Ext.draw.Component", {
  xtype: "draw",
  autoSize: false,
  baseCls: Ext.baseCSSPrefix + 'surface',
  componentLayout: 'draw',
  initSurfaceCfg: Ext.emptyFn,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `autoSize` | `Boolean` | `false` | 控制是否启用 `autoSize` 行为。 | `autoSize: false` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'surface'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'surface'` |
| `componentLayout` | `String` | `'draw'` | 组件采用的内部布局策略。 | `componentLayout: 'draw'` |
| `initSurfaceCfg` | `Mixed` | `Ext.emptyFn` | 配置组件的 `initSurfaceCfg` 选项。 | `initSurfaceCfg: Ext.emptyFn` |
| `shrinkWrap` | `Number` | `3` | 配置组件的 `shrinkWrap` 选项。 | `shrinkWrap: 3` |
| `suspendSizing` | `Number` | `0` | 配置组件的 `suspendSizing` 选项。 | `suspendSizing: 0` |
| `viewBox` | `Boolean` | `true` | 控制是否启用 `viewBox` 行为。 | `viewBox: true` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为。源码涉及 `callParent()`、`addEvents()`。 | `component.initComponent()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`、`createSurface()`、`configureSurfaceSize()`。 | `component.onRender()` |
| `configureSurfaceSize` | `` | 处理 `configureSurfaceSize` 操作。源码涉及 `autoSizeSurface()`。 | `component.configureSurfaceSize()` |
| `autoSizeSurface` | `bbox` | 自动计算尺寸 `surface`。源码涉及 `setSurfaceSize()`。 | `component.autoSizeSurface(...)` |
| `setSurfaceSize` | `width, height` | 设置 `surfaceSize`。 | `component.setSurfaceSize(...)` |
| `createSurface` | `` | 创建 `surface`。 执行时会派发组件事件、更新 `surface` 状态。源码涉及 `initSurfaceCfg()`、`fireEvent()`。 | `component.createSurface()` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为、更新 `themeAttrs`、`gradients` 状态。源码涉及 `callParent()`。 | `component.onDestroy()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `click` | 用户点击组件时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { click: function () {} }` |
| `dblclick` | 用户双击组件时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { dblclick: function () {} }` |
| `mousedown` | 用户按下鼠标按钮时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { mousedown: function () {} }` |
| `mouseenter` | 鼠标进入组件时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { mouseenter: function () {} }` |
| `mouseleave` | 鼠标离开组件时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { mouseleave: function () {} }` |
| `mousemove` | 鼠标在组件上移动时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { mousemove: function () {} }` |
| `mouseup` | 用户松开鼠标按钮时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { mouseup: function () {} }` |

Source: https://ag.879818327.xyz/ext/visual/draw-component/index.mdx