1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    24
    Answers
    1
    Vote Rating
    0
    the_skua is on a distinguished road

      0  

    Default Answered: Drawing in a Container

    Answered: Drawing in a Container


    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.

    Code:
    {	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);
    	}
    }

  2. 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:

    Code:
    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
                    }
                ]
            }
        ]
    });

  3. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Answers
    102
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    set the container to use the fit layout. You should not be setting size for the child components.

  4. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    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
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    24
    Answers
    1
    Vote Rating
    0
    the_skua is on a distinguished road

      0  

    Default


    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):

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