Event raised everytime a panel gets focus

[ultraman69]

I have 1 Main view, and 2 other views. Main view extends Ext.tab.Panel and the other 2 extends Ext.Panel.

The main view is basically a bottom tabbar that contains the 2 other.

Ext.define("MyProject.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar'
    ],
    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',
        layout: {
            type: 'card',
            animation: 'fade'
        },


        items: [
            {
                xtype: 'picpanel'
            },
            {
                xtype: 'calpanel'
            },
            {
                xtype: 'bonuspanel'
            }
        ]
    }
});

The 2 other views (almost identical) both contains a Carousel

Ext.define("MyProject.view.PicViewer", {
    extend: 'Ext.Panel',
    xtype: 'picpanel',
    requires: [
        'Ext.carousel.Carousel',
        'Ext.Img', 
        'Ext.MessageBox'
    ],


    config: {
        title: 'Photos',
        iconCls: 'photos2',
        cls: 'cards',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        defaults: {
            flex: 1
        },


        items: [
            {
                xtype: 'carousel',


                id: 'picViewerCarousel',


                direction: 'horizontal',
                
                initialize: function() {
                    this.setActiveItem(MyProject.app.getCarouselCurrentIndex());
                },


                //and the horizontalCarousels array
                items: [
                    {
                        xtype: 'image',
                        cls: 'my-carousel-item-img',
                        src: 'resources/photos/01b.jpg'
                    },
                    {
                        xtype: 'image',
                        cls: 'my-carousel-item-img',
                        src: 'resources/photos/02b.jpg'
                    },
                    {
                        xtype: 'image',
                        cls: 'my-carousel-item-img',
                        src: 'resources/photos/03b.jpg'
                    }
                ],
                
                listeners: {
                    
                    activeitemchange: function(container, value, oldValue, eOpts) {
                        var activeItemIndex = container.getActiveIndex();
                        MyProject.app.setCarouselCurrentIndex(activeItemIndex);
                    }
                },    
            }
        ],
    }
    
});

As you see, I have set a global variable in my Ext.application. This variable is set whenever a Carousel active index change. That works perfectly fine.

I would like to synchronise both Carousels so that when I changed tab with the menu, they'll be on the same page. So I need to be able to set the active item to the value of the global variable whenever the panel gets the focus. I tried the initialize event, the painted event, the activate event... So far no luck. Can anyone help me ?

[haduki]

Ext.define("MyProject.view.PicViewer", {
    extend: 'Ext.Panel',
    xtype: 'picpanel',
    requires: [
        'Ext.carousel.Carousel',
        'Ext.Img', 
        'Ext.MessageBox'
    ],
    changeCarouselIndex: function(index){
        this.down('carousel').setActiveItem(index);
    },


    config: {
        title: 'Photos',
        iconCls: 'photos2',
        cls: 'cards',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        defaults: {
            flex: 1
        },




        items: [
            {
                xtype: 'carousel',




                id: 'picViewerCarousel',




                direction: 'horizontal',
            
                initialize: function() {
                    this.setActiveItem(MyProject.app.getCarouselCurrentIndex());
                },
                


                //and the horizontalCarousels array
                items: [
                    {
                        xtype: 'image',
                        cls: 'my-carousel-item-img',
                        src: 'resources/photos/01b.jpg'
                    },
                    {
                        xtype: 'image',
                        cls: 'my-carousel-item-img',
                        src: 'resources/photos/02b.jpg'
                    },
                    {
                        xtype: 'image',
                        cls: 'my-carousel-item-img',
                        src: 'resources/photos/03b.jpg'
                    }
                ],
                
                listeners: {
                    
                    activeitemchange: function(container, value, oldValue, eOpts) {
                        var activeItemIndex = container.getActiveIndex(),
                            carousels=Ext.ComponentQuery.query('carousel[id]'),
                            i;
                        MyProject.app.setCarouselCurrentIndex(activeItemIndex);
                        for (i=0;i<carousels.length;i++){
                            carousels.setActiveItem(activeItemIndex);
                        }
                    }
                },    
            }
        ],
    }
    
});