[EXT3] 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.

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.define('User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email', 'phone']
});


var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [{
        name: 'Lisa',
        email: '[email protected]',
        phone: '555-111-1224'
    }, {
        name: 'Bart',
        email: '[email protected]',
        phone: '555-222-1234'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Homer',
        email: '[email protected]',
        phone: '555-222-1244'
    }, {
        name: 'Marge',
        email: '[email protected]',
        phone: '555-222-1254'
    }]
});

var grid =  Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: userStore,
    width: 400,
    height: 400,
    title: 'Application Users',
    columns: [{
        text: 'Name',
        width: 100,
        sortable: false,
        hideable: false,
        dataIndex: 'name'
    }, {
        text: 'Email Address',
        width: 150,
        dataIndex: 'email',
        hidden: true
    }, {
        text: 'Phone Number',
        flex: 1,
        dataIndex: 'phone'
    }],
    dockedItems: [{
        dock:...