源码定义：ext-all-debug.js:61541。分类：图表与绘图。
创建示例
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 () {} } |