sencha touch repeated task - sencha-touch-2

Question

I want to move a panel from bottom to up. smoothly. for this i try this code.
Ext.define("mathmania.view.Main", {
extend: 'Ext.Panel',
requries: [
'Ext.util.DelayedTask'
],
xtype: 'panel',
config: {
autodestory: true,
border: 1,
html: 'test panel',
bottom: 0,
centered: true,
padding: 10,
margin: '2%',
width: '95%',
listeners: {
painted: 'countdown'
}
},
countdown: function()
{
var task = Ext.create('Ext.util.DelayedTask', function() {
this.setBottom(this.getBottom + 5);
task.delay(100);
});
task.delay(0);
}
but each time it works only once not for multiple time as a repeating task?. for moving this float panel smoothly is there any better way or what i missing in this code?

Answer 1

I have tried using do-while loop, Panel is moving two times now but still the objective is unachieved. I think i am lacking somewhere in loop.
Hope this helps a little bit.
Ext.define("mathmania.view.Main", {
extend: 'Ext.Panel',
requries: [
'Ext.util.DelayedTask'
],
xtype: 'panel',
config: {
id: 'main1',
autodestory: true,
border: 1,
html: 'test panel',
bottom: 0,
centered: true,
padding: 10,
margin: '2%',
width: '95%',
listeners: {
painted: 'countdown'
}
},
countdown: function()
{
var a=Ext.getCmp('main1');
var i=0;
var j=20;
do{
var task = Ext.create('Ext.util.DelayedTask', function() {
a.setBottom(a.getBottom() + 10);
task.delay(500);
});
task.delay(1000);
i++;
}while(i<j)
}
});