javascript - Sencha Touch 2 carousel indicator tap events -

i have sencha touch 2 carousel (see http://dev.sencha.com/deploy/touch/examples/production/carousel/index.html). need capture event when active item first , user tries navigate back. also, when active item last , user tries navigate forward.

i haven't found on sencha touch docs close needs: http://docs.sencha.com/touch/2.2.0/#!/api/ext.carousel.carousel

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

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