Question

我正在创建一个用于显示图像的sencha-touch基本轮播，一次一个。 Carousel顶部是一个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();
                                        }               
                                    },              
                                } 
        });

Answer 1

使用afterrender事件

Answer 2

您可以检查active index并在carousel的cardswitch事件中设置工具栏标题。用户更换卡后会自动触发。

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

以及关于cardwitch事件

this.topBar.setTitle(activeIndex)

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

2 个答案: