Sencha touch sencha touch转盘监听器并在面板上显示项目索引

我正在创建一个sencha touch base转盘，用于显示图像，一次一个。 旋转木马的顶部是一个dockedItem。在这种情况下，我想显示图像的序列号（即5个序列号中的1个序列号等）

我无法确定应该处理什么事件，或者应该使用什么方法更新文本

我正在使用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();
                                        }               
                                    },              
                                } 
        });

var carousel=new Ext.carousel（{
全屏：对，
摘要：[{
对,，
码头：“顶部”，
xtype:'工具栏'，
样式：“不透明度：0.6；”，
项目：[{
xtype:'按钮'，
文本：“主菜单”，
},
{xtype:'间隔'}，
{
文本：“”，
用户界面：“行动”，
听众：
{ 
onCreate:function（）
{
log（this.getActiveIndex（）.toString（））；
this.text=this.getActiveIndex（）.toString（）；
这个是doLayout（）；
},
}
}
],
听众：
{ 
启动：函数（）
{
log（this.getActiveIndex（）.toString（））；
this.text=this.getActiveIndex（）.toString（）；
这个是doLayout（）；
},
}
}, 
{
覆盖：假，
船坞：“底部”，
xtype:'工具栏'，
样式：“不透明度：0.75；”，
项目：
{
html:'
}
}],
布局：'卡片'，
项目：[
{
cls：“图1图”
}, 
{
cls：“图2图”
},
{
cls：“图3图”
},
{
cls：“图4图”
},
{
cls：“图5图”
}
],
听众：{
卡式开关：
{                 
fn：函数（）
{                   
//警报（this.getActiveIndex（））；
var indx=this.getActiveIndex（）；
var-str=''；
str=“hello”+indx.toString（）；
this.docketItems.items[1].html=“+str+”；
carousel.doComponentLayout（）；
console.log（str）；
这个是doLayout（）；
}               
},              
} 
});

使用事件

您可以检查并设置carousel事件上的工具栏标题。在用户更改卡后，它会自动触发

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

和关于cardswitch事件

this.topBar.setTitle(activeIndex)