Sencha Touch 2 carousel indicator tap events

Question

I have a Sencha Touch 2 carousel (see http://dev.sencha.com/deploy/touch/examples/production/carousel/index.html ). I need to capture the event when the active item is first and the user tries to navigate back. Also, when the active item is the last and the user tries to navigate forward.

I haven't found on Sencha Touch docs anything close to my needs: http://docs.sencha.com/touch/2.2.0/#!/api/Ext.carousel.Carousel

Let's start from here:

Ext.create('Ext.Carousel', {
fullscreen: true,

defaults: {
    styleHtmlContent: true
},

items: [
    {
        html : 'Item 1',
        style: 'background-color: #5E99CC'
    },
    {
        html : 'Item 2',
        style: 'background-color: #759E60'
    },
    {
        html : 'Item 3'
    }
]});

Answer 1

    var activeItem = 0; // initial active carousel item
    Ext.create('Ext.Carousel', {
    fullscreen: true,
    id: 'q-car',
    defaults: {
        styleHtmlContent: true
    },
    initialize: function(){
        var caru = Ext.getCmp('q-car'),
            ind = caru.getIndicator();

        ind.onTap = function(e){
            var touch = e.touch,
                box = this.element.getPageBox(),
                centerX = box.left + (box.width / 2),
                centerY = box.top + (box.height / 2),
                direction = this.getDirection(),
                itemsCount = caru.getItems().length-2; // items length includes the indicator bar.

            if(direction === 'horizontal'){
                if(touch.pageX >= centerX){
                    if(activeItem < itemsCount){
                        this.fireEvent('next', this);
                        activeItem++                                                
                    }else{
                        console.log('end of carousel')
                    }
                }else{
                    if(activeItem > 0){
                        this.fireEvent('next', this);
                        activeItem--                                                
                    }else{
                        console.log('begin of carousel')
                    }
                }       
            }
        }
    },
    items: [
        {
            html : 'Item 1',
            style: 'background-color: #5E99CC'
        },
        {
            html : 'Item 2',
            style: 'background-color: #759E60'
        },
        {
            html : 'Item 3'
        }
    ]});