trigger a function to run when a carousel's page is changed in Sencha Touch

I'm not sure how many people on here have used the Sencha Touch js library, but I have a question that MUST be simple despite my many attempts and fails. Basically, I have a carousel which pages through results as you swipe, and I want to trigger a function each time a new page is shown.

Anyone have any idea how to do this? I've tried adding a listener to it, and for some reason that doesn't work. Something like this:

var apCarousel = new Ext.Carousel({
            direction: 'horizontal',
            activeItem: 0,
            ui: 'dark',
            itemId  :   "apCarousel",
            items: pageItems,
            listeners   :   {
                click   :   {
                    element :   this,
                    fn  :   function(){alert('yo!');}
                }
     开发者_StackOverflow       }
        });

Any help would be greatly appreciated. Thanks.

Use the cardswitch event:

Ext.setup({
    onReady: function(){
        new Ext.Carousel({
            fullscreen: true,
            listeners: {
                cardswitch: function(container, newCard, oldCard, index){
                    console.log(container, newCard, oldCard, index);
                }
            },
            items: [{
                html: 'a'
            },{
                html: 'b'
            },{
                html: 'c'
            }]
        });
    }
});

I had the same problem, try to add listener like:

listeners: {
             cardswitch:
             {
                fn: function()
                {
                  alert(this.getActiveIndex() );
                }
              },
             }