Getting First Drawing Object to Show

[Eric.Sencha]

Hello,

Can someone point out what i am doing wrong to get a circle to show in a lower vbox panel:

Ext.require( 'Ext.container.Viewport' );

var drawComponent = Ext.create('Ext.draw.Component',
{
viewBox: false
});

Ext.application(
{
name: 'Vertical Box Layout Application',
launch: function()
{
Ext.create('Ext.container.Viewport',
{
layout:
{
id: 'viewport',
type: 'vbox',
align: 'left'
},
items:
[
{
id: 'panelTop',
margins: '0 0 2 0'
},
{
id: 'panelBottom',
margins: '3 0 0 0',
flex: 1,
items:
[
drawComponent
]
}
]
}).show(true);

// Add a circle sprite
var myCircle = drawComponent.surface.add(
{
type: 'circle',
x: 100,
y: 100,
radius: 100,
fill: '#cc5'
}).show(true);
}
});

Thanks. - I don't get an error message in debugger - just no circle.

-Erich

[Eric.Sencha]

To get this to work I moved the circle parameters to the items section for my drawComponent variable and I added dimensions to my drawComponent.

My next task will be to figure out how to autosize the drawComponent to the parent pane and how to autosize the circle inside my drawComponent to the resulting size of the drawComponent.

[Eric.Sencha]

I managed to get the Circle autosized to the lower vbox panel by setting the layout on the lower vbox panel to "fit". I had to keep a size and radius for the circle for it to render - however it does resize correctly to the lower vbox panel.