simple animations in ST

[momesana]

Hi,
why is the following change of width not animated in ST though similiar code is animated in Ext js:


Ext.setup({
fullscreen: true,
statusBarStyle: 'black-translucent',
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function() {

var cnt = new Ext.Container({
html: '<div style="background:white; width: 300px; height:300px;">Some text</div>',
fullscreen: true
});

var el = cnt.getEl().down('div');

el.on('mouseover', function() {
el.setWidth(600, true);
});

el.on('mouseout', function() {
el.setWidth(300, true)
}, el);

}
});

Ext.Element's documentation explicitly lists an example of changing the width in an animated way. Then further down, the documentation of the setWidth() method does not list the optional Boolean/Object parameter. In other words the documentation is a mess :-(. Any ideas how I can achieve a change of opacity or size in an animated way?

Thanks in advance

[momesana]

Evant was kind enough to show me how to do this by pointing out his previous post: http://www.sencha.com/forum/showthread.php?112495-using-custom-animations

In case you are also new to this, here is some tiny piece of code I wrote to fool around with it.


function getRandomColor() {
var min = 50; // don't set min to a value greate than 255
var ar = new Array();
for (var i = 0; i < 3; ++i) {
ar.push(min + parseInt(Math.random() * (255 - min)));
}
var color = 'rgb(' + ar.join(",") + ')';
return color;
}

Ext.setup({
fullscreen: true,
statusBarStyle: 'black-translucent',
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function() {
var cnt = new Ext.Container({
layout: 'fit',
html: 'content',
top: '200px',
left: '0px',
height: 200,
width: 300,
style: {
backgroundColor: 'yellow'
}
});

var screen = new Ext.Container({
fullscreen: true,
layout: {
type: 'vbox',
align: 'center'
},
items: [cnt]
});


function createAnim() {
var min = 100;
var increaseMax = 300;
var w = Math.round(min + increaseMax * (Math.random() % 300));
var h = Math.round(min + increaseMax * (Math.random() % 300));
return new Ext.Anim({
duration: 500,
autoClear: false,
before: function(el) {
this.to = {
width: w + 'px',
height: h + 'px',
'background-color': getRandomColor()
};
}
});
}

var el = cnt.getEl();
el.on('mouseover', function() {
Ext.Anim.run(el, createAnim());
});

el.on('mouseout', function() {
Ext.Anim.run(el, createAnim());
})
}
});


Thanks