PDA

View Full Version : Ext.draw.Component



luoyu
21 Oct 2011, 1:14 AM
Hi,
I have a problem with "Ext.draw.Component" .
I have a "click" event,when i check,it will open a window,in the window will have a animation running.
This is my code :



var drawComponent = Ext.create('Ext.draw.Component',{
viewBox : false
});
Ext.create('Ext.window.Window',{
title : '????1',
width : 300,
height : 300,
layout : 'fit',
items : [drawComponent]
}).show();
drawComponent.stopAnimation();
var surface = drawComponent.surface;
surface.add([{
type : 'circle',
radius : 10,
fill : '#f00',
x : 120,
y : 120,
group : 'circles_1'
},{
type : 'circle',
radius : 10,
x : 120,
y : 120,
fill : '#f00',
group : 'circles_2'
},{
type : 'circle',
radius : 10,
x : 120,
y : 120,
fill : '#f00',
group : 'circles_3'
},{
type : 'circle',
radius : 10,
x : 120,
y : 120,
fill : '#f00',
group : 'circles_4'
},{
type : 'circle',
radius : 10,
x : 120,
y : 120,
fill : '#f00',
group : 'circles_5'
},{
type : 'path',
stroke : 'black',
path :'M 120 120',
'storke-width' : 2,
group : 'lines-1'
},{
type : 'path',
stroke : 'black',
path :'M 120 120',
'storke-width' : 2,
group : 'lines-2'
},{
type : 'path',
stroke : 'black',
path :'M 120 120',
'storke-width' : 2,
group : 'lines-3'
},{
type : 'path',
stroke : 'black',
path :'M 120 120',
'storke-width' : 2,
group : 'lines-4'
}]);

var circles_1 = surface.getGroup('circles_1');
circles_1.animate({
duration: 5000,
to : {
x : 40,
y : 200
}
});

var circles_2 = surface.getGroup('circles_2');
circles_2.animate({
duration: 5000,
to : {
x : 40,
y : 40
}
});

var circles_3 = surface.getGroup('circles_3');
circles_3.animate({
duration: 5000
});

var circles_4 = surface.getGroup('circles_4');
circles_4.animate({
duration: 5000,
to : {
x : 200,
y : 200
}
});

var circles_5 = surface.getGroup('circles_5');
circles_5.animate({
duration: 5000,
to : {
x : 200,
y : 40
}
});


var lines_1 = surface.getGroup('lines-1');
lines_1.animate({
to : {
path : 'M120 120 L 40 200'
},
duration : 5000
});

var lines_2 = surface.getGroup('lines-2');
lines_2.animate({
to : {
path : 'M120 120 L 40 40'
},
duration : 5000
});

var lines_3 = surface.getGroup('lines-3');
lines_3.animate({
to : {
path : 'M120 120 L 200 200'
},
duration : 5000
});

var lines_4 = surface.getGroup('lines-4');
lines_4.animate({
to : {
path : 'M120 120 L 200 40'
},
duration : 5000
});


Now,this my problem:
For example,first I click the button,the it can open a window and running the animation,but if the first animation is running, i click the button again,then the second animation must wait for the first animation run finished,it can be runn.
so i want to use
drawComponent.stopAnimation();to stop all animation,but it can not have effect.
thanks

stevemc
21 Oct 2011, 4:12 AM
Have tried calling stopAnimation on the actual sprite that is doing the animation:


sprite.stopAnimation();

luoyu
21 Oct 2011, 7:20 AM
Have tried calling stopAnimation on the actual sprite that is doing the animation:


sprite.stopAnimation();

thank you."
sprite.stopAnimation(); " is right.Thank you very much.