Uncaught Attempting to create a component with an xtype that has not been registered:

[mobitex]

Hello,

i try to create a draw component with sencha touch. But i get always the following error:

"Uncaught Attempting to create a component with an xtype that has not been registered: [object Object]"

What could that mean ?

Ext.setup({
    tabletStartupScreen: 'tablet_startup.jpg',
    phoneStartupScreen: 'phone_startup.jpg',
    tabletIcon: 'icon-ipad.png',
    phoneIcon: 'icon-iphone.png',
    glossOnIcon: false,
    onReady: function() {
      
		this.drawComponent = Ext.create('Ext.draw.Component', {
    		xtype: 'chart',
			viewBox: false,
		     items: [{
		        type: 'circle',
		        fill: '#79BB3F',
		        radius: 100,
		        x: 100,
		        y: 100
    		}]
		});
		
		
		this.pnl = new Ext.Panel({
		  fullscreen : true,
		  style: 'background-color: red;'	
		}) ;
		this.pnl.show('pop'); 	
    }
});

Kind regards

Jürgen

[greenkohl23]

I don't know, if I'm getting it right, but isnt it mentionted in the drawing Examples? If I'm right i show you how I understand it:

new Ext.Application({
    launch: function() {

        // Create a draw component
        var drawComponent = new Ext.draw.Component({
            viewBox: false
        });

        // Create a window to place the draw component in
        this.rootpanel = new Ext.Panel({
            fullscreen:true,
            layout: 'fit',
            items: [drawComponent]
        })

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

        // Now do stuff with the sprite, like changing its properties:
        myCircle.setAttributes({
            fill: '#ccc'
        }, true);

        // or animate an attribute on the sprite
        myCircle.animate({
            to: {
                fill: '#555'
            },
            duration: 2000
        });

        // Add a mouseup listener to the sprite
        myCircle.addListener('mouseup', function() {
            alert('mouse upped!');
        });
    }
}); 

I hope it would help you.

ps: sry for my bad englisch

[JensW]

Try to use "new Ext.draw.Component"-Syntax instead of Ext.create('...')-Syntax. It worked for me with Ext.chart.Chart.

[mobitex]

This it works well.

I don't know, if I'm getting it right, but isnt it mentionted in the drawing Examples? If I'm right i show you how I understand it:

new Ext.Application({
    launch: function() {

        // Create a draw component
        var drawComponent = new Ext.draw.Component({
            viewBox: false
        });

        // Create a window to place the draw component in
        this.rootpanel = new Ext.Panel({
            fullscreen:true,
            layout: 'fit',
            items: [drawComponent]
        })

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

        // Now do stuff with the sprite, like changing its properties:
        myCircle.setAttributes({
            fill: '#ccc'
        }, true);

        // or animate an attribute on the sprite
        myCircle.animate({
            to: {
                fill: '#555'
            },
            duration: 2000
        });

        // Add a mouseup listener to the sprite
        myCircle.addListener('mouseup', function() {
            alert('mouse upped!');
        });
    }
}); 

I hope it would help you.

ps: sry for my bad englisch

[rando]

Thx Mobitex. Your code does work indeed.

Anyone knows why the draw component doesn't get displayed if I remove the myCircle.animate call? I tried adding a 'this.rootpanel.show(true)' but nothing gets displayed neither

[12ftguru]

I am seeing the same thing you are rando. The following code does not draw anything unless I add an animate call.

new Ext.Application({
    launch: function() {
	this.drawComponent = new Ext.draw.Component({
    viewBox: false
  });


  // Create a window to place the draw component in
  this.rootpanel = new Ext.Panel({
      fullscreen:true,
      layout: 'fit',
      items: [this.drawComponent]
  });

     // Add a circle sprite
    this.myCircle = this.drawComponent.surface.add({
        type: 'circle',
        x: 400,
        y: 400,
        radius: 300,
        stroke: '#000000'
    });

    this.myCircle.show(true); /* seems like this should do something */

  }
});

[Jamie Avins]

Try using the renderFrame method on the surface you wish to paint.