PDA

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



mobitex
24 Jul 2011, 10:59 AM
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
26 Jul 2011, 1:16 AM
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
27 Jul 2011, 8:01 AM
Try to use "new Ext.draw.Component"-Syntax instead of Ext.create('...')-Syntax. It worked for me with Ext.chart.Chart.

mobitex
27 Jul 2011, 11:43 AM
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
28 Jul 2011, 7:17 AM
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
2 Aug 2011, 7:50 AM
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
2 Aug 2011, 8:23 AM
Try using the renderFrame method on the surface you wish to paint.