Sencha Touch 2轮播指示器点击事件

Question

我有一个Sencha Touch 2传送带（请参阅http://dev.sencha.com/deploy/touch/examples/production/carousel/index.html ）。 当活动项目为第一个并且用户尝试向后导航时，我需要捕获事件。 同样，当活动项目是最后一个项目并且用户尝试向前导航时。

我在Sencha Touch文档上没有找到任何满足我需求的东西： http : //docs.sencha.com/touch/2.2.0/#!/api/Ext.carousel.Carousel

让我们从这里开始：

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'
        }
    ]});