PDA

View Full Version : [CLOSED-EXTJSIV-948]Can't add a text sprite dynamically



vega109
12 Apr 2011, 2:08 PM
Hello

I can't put a text sprite on a surface dynamically.
Thank you!


var drawCmp = Ext.getCmp('draw-component');
var surface = drawCmp.surface;

new Ext.draw.Sprite({
id : 'draw-sprite-3',
type : 'text',
surface: surface,
text : 'Simple text',
font : '12px Arial',
x : x,
y : y,
width : 100,
height : 100
}).show();

philogb
13 Apr 2011, 11:03 AM
Try adding it like this:



drawCmp.surface.add({
id: 'draw-sprite-3',
type: 'text',
text: 'Simple text',
font: '12px Arial',
x: 5,
y: 5,
width: 100,
height: 100
}).show(true);
});

steffenk
13 Apr 2011, 11:19 AM
but if you compare - shapes can be added the first way, only text throws an error.

philogb
13 Apr 2011, 12:58 PM
I just did this and it worked just fine:



Ext.create('Ext.draw.Sprite', {
id : 'draw-sprite-3',
type : 'text',
text : 'Simple text',
font : '12px Arial',
surface: canvas.surface,
x : 50,
y : 50,
width : 100,
height : 100
}).show(true);


The `true` parameter in the `show` method forces the surface to repaint the sprite and not just update its properties.

steffenk
13 Apr 2011, 1:07 PM
hm - could you tell me what is wrong in this example? It doesn't work for me.


Ext.onReady(function() {
var canvas = Ext.create('Ext.draw.Component', {
viewBox: false,
gradients: [
{
type: 'linear',
id: "g1",
stops: {
0: {
color: "#009900"
},
100: {
color: "#FFFFFF"
}
}
}
],
items: [
{
type: 'rect',
x: 300,
y: 50,
height: 100,
width: 200,
fill: 'url(#g1)',
stroke: "black",
'stroke-width': 2
},
{
type: 'circle',
x: 200,
y: 260,
radius: 50,
fill: '#ff6600'
}
]
});


var win = Ext.create('Ext.window.Window', {
title: 'Sprites',
width: 600,
height: 400,
x: 200,
y: 200,
layout: 'fit',
hidden: false,
maximizable: true,
renderTo: Ext.getBody(),
items: [canvas],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: ['->', {
text: 'Add text sprite',
handler: function() {
var textsprite = new Ext.draw.Sprite({
type : 'text',
text : 'Simple text 123',
font : '12px Arial',
x : 200,
y : 40,
width : 100,
height : 100
});
canvas.surface.add(textsprite);
textsprite.show(true);
}
}
]
}
]
}).show();
});

philogb
13 Apr 2011, 1:51 PM
Hi,

Thanks for the report. I finally found the bug you were talking about. I was trying the other way you were suggesting before:



var textsprite = new Ext.draw.Sprite({
type : 'text',
text : 'Simple text 123',
surface: canvas.surface,
font : '12px Arial',
x : 200,
y : 40,
width : 100,
height : 100
}).show(true);


That works, but didn't try creating a sprite without the surface attribute and then appending it to the surface class. I fixed this now.

Thanks again for the report!

steffenk
13 Apr 2011, 1:55 PM
great, thx!

steffenk
15 Apr 2011, 1:02 AM
i'm sorry, but with beta3 the example doesn't work!


Ext.onReady(function() {
var canvas = Ext.create('Ext.draw.Component', {
viewBox: false,
gradients: [
{
type: 'linear',
id: "g1",
stops: {
0: {
color: "#009900"
},
100: {
color: "#FFFFFF"
}
}
}
],
items: [
{
type: 'rect',
x: 300,
y: 50,
height: 100,
width: 200,
fill: 'url(#g1)',
stroke: "black",
'stroke-width': 2
},
{
type: 'circle',
x: 200,
y: 260,
radius: 50,
fill: '#ff6600'
}
]
});


var win = Ext.create('Ext.window.Window', {
title: 'Sprites',
width: 600,
height: 400,
x: 200,
y: 200,
layout: 'fit',
hidden: false,
maximizable: true,
renderTo: Ext.getBody(),
items: [canvas],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: ['->', {
text: 'Add text sprite',
handler: function() {
var textsprite = new Ext.draw.Sprite({
x: 50,
y: 160,
radius: 50,
fill: '#888999'
});
canvas.surface.add(textsprite);
textsprite.show(true);
}
}
]
}
]
}).show();


});

Also, the draw component suddenly gets blue - seems window changed again.

philogb
15 Apr 2011, 9:33 AM
You forgot to specify the type of the sprite in your example. I added `type: 'circle'` and it works well to me.



var textsprite = new Ext.draw.Sprite({
type :'circle', //<-- Add a type of sprite
x: 50,
y: 160,
radius: 50,
fill: '#888999'
});


Remember that if you want to add a text Sprite you also need to set some text value to it.

philogb
15 Apr 2011, 9:33 AM
Sorry for the indentation. Here's the code again:


var textsprite = new Ext.draw.Sprite({
type :'circle', //<-- add a type
x: 50,
y: 160,
radius: 50,
fill: '#888999'
});

steffenk
15 Apr 2011, 9:38 AM
yes it does, sry for the confusion (was too late yesterday)