[EXT4] Moving element in a scrolling container

Demonstrates the behavior when moving an element inside a container with overflow and scrolling this container at the same time.

HTML

<div id="container">
    <div class="item" id="first-item"></div>
    <div class="item" id="second-item"></div>
    <div class="item" id="last-item"></div>
</div>
<button id="go">Action</button>

CSS

#container {
    width: 300px;
    height: 200px;
    border: solid 2px red;
    overflow: auto;
    margin: 0 auto;
    position: relative;
}

.item {
    height: 180px;
    width: 50px;
    position: absolute;
}

#first-item {
    background: gray;   
    left: 0px;
}

#second-item {
    background: green;
    left: 200px;
}

#last-item {
    background: lightgray;
    left: 400px;
}

#go {
    width: 100%;
}

JavaScript

Ext.onReady(function() {
    var cont = Ext.get('container'),
        first = Ext.get('first-item'),
        sec = Ext.get('second-item'),
        last = Ext.get('last-item'),
        goBtn = Ext.get('go');
    
    function doAction() {
    alert(first.getX());
        var delta = 100,
            animCfg = {duration: 1000};
       first.setX(first.getX(), animCfg); // the 1st element MUST stay in its place (doesn't in ExtJS 4)
       sec.setX(sec.getX() + delta, animCfg);
       last.setX(last.getX() + delta, animCfg); // 3rd element just to expand the scroll range
       cont.scrollTo('left', cont.dom.scrollLeft + delta, animCfg);  // container scroll MUST follow the 2nd element
    };
    
    goBtn.on('click', doAction);    
});