1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    28
    Answers
    1
    Vote Rating
    0
    ultraman69 is on a distinguished road

      0  

    Default Unanswered: Event raised everytime a panel gets focus

    Unanswered: Event raised everytime a panel gets focus


    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.

    Code:
    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

    Code:
    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 ?

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    Code:
    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);
                            }
                        }
                    },    
                }
            ],
        }
        
    });
    I write English by translator.

Thread Participants: 1

Tags for this Thread