Carousel

by gorillawit

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css">

CSS

body
{
    padding: 12px;
}

JavaScript

Ext.define('carouselContainer', {
    extend: 'Ext.container.Container'
    , alias: 'widget.carousel'
    
    , layout: {
        type: 'hbox'
        , align: 'stretch'
    }
    , defaults: { flex: 1 }
    , style: {
        background: 'url(http://3.bp.blogspot.com/-kanvyoXSOSs/Tsi0W496bzI/AAAAAAAAAG8/-Bq53wJqaqM/s320/carbonfibre.png)'
    }
    
    , initComponent: function () {
        var me = this;
        
        me.addEvents('carouselchange');
        
        me.callParent(arguments);
    }
    , onDocMouseup: function () {
        var me = this;
        me.drag = false;
        var children = me.items.items;
        var parentLeft = me.ownerCt.el.getLeft();
        var rule = 1000000;
        var target;
        Ext.each(children, function (div, i) {
            l = Math.abs(div.el.getLeft() - parentLeft);
            if (l < rule) {
                rule = l;
                target = div;
            };
        });
        me.showChild(target);
    }
    , onMousedown: function (e) {
        e.stopEvent();    // prevents selecting the underlying text and whatnot
        var me = this;
        me.drag = true;
        me.startX = e.getX();
        var par = me.el.first();
        par.on({
            mousemove: function (e) {
                e.stopEvent();    // prevents selecting the underlying text and whatnot
                if (me.drag) {
                    var rate = 1;
                    if (par.getLeft() > me.ownerCt.el.getLeft() || par.getRight() < me.ownerCt.el.getRight()) {
                        rate = 2;
                    }
                    par.move('l', (me.startX - e.getX()) / rate, false);
                    me.startX = e.getX();
                }
            }
        });
    }
    , syncSizeToOwner: function () {
        var me = this;
        if (me.ownerCt) {
            me.setSize(me.ownerCt.el.getWidth() * me.items.items.length, me.ownerCt.el.getHeight());
        }
    }
    , showChild: function (item) {
        var me...