extjs4 - 如何为 Ext js 绘制组件创建表面

Question

我使用以下代码创建了一个矩形：

var drawComponent = Ext.create('Ext.draw.Component', {
    autoSize: true,
    viewBox: false,
    x: 200,
    y: 100,
    draggable: true,
    viewBox: false,
    renderTo: document.body
}),
    surface = drawComponent.surface;

sprite = surface.add({
    type: 'rect',
    fill: 'white',
    stroke: 'red',
    x: 10,
    y: 5,
    'stroke-width': 3,
    width: 100,
    height: 50
});
sprite.show(true);​

之后我将它添加到窗口。

现在我想创建许多绘图组件，所以我创建了一个这样的自定义类：

Ext.define('DrawComponent', {
    extend: 'Ext.draw.Component',
    autoSize: true,
    viewBox: false,
    draggable: true,
    renderTo: document.body
});​

我正在使用这样的自定义类：

var drawComponent = Ext.create('DrawComponent', {
    x: 200,
    y: 100
}),
    surface = drawComponent.surface;
sprite = surface.add({
    type: 'rect',
    fill: 'white',
    stroke: 'red',
    x: 10,
    y: 5,
    'stroke-width': 3,
    width: 100,
    height: 50
});
sprite.show(true);​

但是这里显示的表面是undefined......你可以看到我的自定义类正在扩展Ext.draw.component类为什么它显示错误

Answer 1

Surface仅在渲染后可用。afterrender因此，您可以在 initComponent 方法中为事件添加事件处理程序，并使用表面。