How to create surface for Ext js draw component

Question

I created a rectangle by using this code:

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);​

After that I've add it to window.

Now I want to create many draw components so I created a custom class like this:

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

I'm using this custom class like this:

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);​

But here it is showing surface is undefined... You can see my custom class am extending Ext.draw.component class why it is showing error

Answer 1

Surface is only available after rendering. So you may add an event handler for event afterrender in the initComponent method, and use the surface.