PDA

View Full Version : Drawing in a Container



the_skua
16 Feb 2012, 10:40 AM
I'm having trouble drawing a simple shape in a Container that's the child of a container (which is a child of a panel). My code follows. How do I do this correctly so that it actually draws the circle? I don't need to interact or do anything dynamic. I just want to draw this circle and leave it there. I am using MVC.


{ xtype: 'container',
height: 24,
width: 17,
initComponent: function() {
var drawComponent = Ext.create('Ext.draw.Component', {
width: 17,
height: 24,
viewBox: false,
items: [{
type: 'circle',
fill: '#66C2A5',
radius: 5,
x: 5,
y: 5
}]
});

this.items = [drawComponent];
this.callParent(arguments);
}
}

jay@moduscreate.com
16 Feb 2012, 10:58 AM
set the container to use the fit layout. You should not be setting size for the child components.

mitchellsimoens
16 Feb 2012, 11:00 AM
initComponent should only be used when you are creating a new class, here you are trying to use it when creating an instance and is not valid. Try this:


new Ext.container.Container({
renderTo : Ext.getBody(),
width : 17,
height : 24,
layout : 'fit',
items : [
{
xtype : 'draw',
viewBox : false,
items : [
{
type : 'circle',
fill : '#66C2A5',
radius : 5,
x : 5,
y : 5
}
]
}
]
});

the_skua
16 Feb 2012, 11:06 AM
Perfect. I used it inline with my MVC definition and it drew nicely. Thanks for your help, I appreciate it. Had been banging my head against it for awhile.

This was the code that drew for me (a slight modification):


{ xtype: 'container',
height: 24,
width: 17,
layout: 'fit',
items: [{
xtype : 'draw',
viewBox : false,
items : [
{
type : 'circle',
fill : '#66C2A5',
radius : 5,
x : 5,
y : 5
}
]
}]
}