Question

i have a carousel with 3 items and i have 1 toolbar. But how can i change the title of the toolbar depending on which item the carousel is showing? for example:

var theCarousel = new Ext.Carousel({
                ui: 'dark',
                direction: 'horizontal',
                defaults: { cls: 'card', layout:'fit' },
                items: [
                    { 
                     html:'<b>I'm big</b>'
                    },
                    {
                     html:'<i>I'm oblique</i>'
                    },
                    {
                     html:'<u>I'm underlined</u>'
                    }

});


var toolbar = new Ext.Toolbar({
                          title: 'iToolbar' ,
                          dock: 'top',
                          items:[
                              {
                                  text:'back',
                                  ui:'back'

                              },{xtype: 'spacer'},
                              {
                                  text:'Help',
                                  ui:'help'
                              }   

                          ]
              });

 var panel = new Ext.Panel({
                fullscreen: true,
                layout: {
                    type : 'fit',
                    align: 'top'
                },
                defaults: {
                    flex: 1
                },
                items: [ theCarousel ],
                dockedItems: [ toolbar ]
            });
   panel.show();

so when i am at the item ‘I’m oblique’ i want the title of the toolbar to show ‘I’m oblique’
Anny ideas on how to do this? Ty, Already!

Answer 1

When each new card is revealed, Ext.Carousel fires an cardSwitch event. The handler of this event will receive the new card component as the second parameter. You can do

panel.setTitle(newCard.getYourTitle());

in the handler.