Sencha Touch Carousel listerner и отображение предметного указателя на панели

Question

Я создаю базовую карусель sencha-touch для отображения изображений, по одному за раз. На вершине карусели находится закрепленный предмет. В этом я хочу отобразить серийный номер изображения (т.е. 1 из 5 и т. Д.).

Я не могу определить, какое событие мне следует обрабатывать или какой метод использовать для обновления текста.

Я использую Sencha Touch 1.1.

Вот код моей карусели:

var carousel= new Ext.Carousel({  
     fullscreen: true,
     dockedItems: [{
         overlay: true,
         dock: 'top',
         xtype: 'toolbar',
         style: 'opacity: 0.6;',
         items:[{
            xtype: 'button',
            text: "Main menu",
          },
          { xtype: 'spacer' },
          {
              text: '',
              ui: 'action',
              listeners:
              { 
                onCreate : function () 
                  {
                     console.log(this.getActiveIndex().toString());
                     this.text=this.getActiveIndex().toString();
                     this.doLayout();
                  },
               }
            }
           ],
            listeners:
            { 
                launch : function () 
                {
                    console.log(this.getActiveIndex().toString());
                    this.text=this.getActiveIndex().toString();
                    this.doLayout();
                },
            }
        }, 
        {
            overlay: false,
            dock: 'bottom',
            xtype: 'toolbar',
            style: 'opacity: 0.75;',
            items: 
                {
                    html: '<img style="display: block; margin-left: auto; margin-right: auto;" alt="" src="images/options.png" onclick="return loadOptionPage();">'
                }
        }],

     layout:'card',
     items:[
                    {
                            cls: "figure1 figure"  
                    }, 
                    {
                            cls: "figure2 figure"
                    },
                                    {
                                        cls: "figure3 figure"
                                    },
                                    {
                                        cls: "figure4 figure"
                                    },
                                    {
                                        cls: "figure5 figure"
                                    }
                                ],
                                listeners: {              
                                    cardswitch:              
                                    {                 
                                        fn: function()                 
                                        {                   
                                            //alert(this.getActiveIndex() );
                                            var indx=this.getActiveIndex();
                                            var str='';
                                            str="hello"+indx.toString();
                                            this.dockedItems.items[1].html="<div>"+str+"</div>";
                                            carousel.doComponentLayout();
                                            console.log(str);
                                            this.doLayout();
                                        }               
                                    },              
                                } 
        });

Answer 1

Вы можете проверить активный индекс и установить заголовок панели инструментов на событии карточного переключателя карусели . Он запускается автоматически после смены карты пользователем.

this.topBar = new Ext.Toolbar({
        dock: 'top',
        title: ''
});

и при событии переключения карт

this.topBar.setTitle(activeIndex)

Answer 2

используйте afterrender событие