ExtJS: animating multiple elements differently with a single animation config

by dipish

HTML

<button onclick="doAction();">Action!</button>
<div id="container">
    <div class="item" style="background: red; top: 0; left: 200px;"></div>
    <div class="item" style="background: green; top: 200px; left: 400px;"></div>
    <div class="item" style="background: blue; top: 200px; left: 0;"></div>
</div>

CSS

.item {
    width: 100px;
    height: 100px;
    position: absolute;
}

JavaScript

window.animCfg = {duration: 1};

window.doAction = function() {
    var items = Ext.fly('container').query('.item'),
        xy;
    for(var i = 0, len = items.length; i < len; i++) {
        xy = Ext.fly(items[i]).getXY();
        Ext.fly(items[i]).moveTo(xy[1], xy[0], animCfg);
    }
}