如何爲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僅在渲染後可用。因此，您可以在initComponent方法中爲事件afterrender添加事件處理程序，並使用該表面。